form 表單標籤
阿新 • • 發佈:2018-11-09
表單
作用:表單目的是為了收集使用者資訊。
在我們網頁中, 我們也需要跟使用者進行互動,收集使用者資料,此時也需要表單。
在HTML中,一個完整的表單通常由表單控制元件(也稱為表單元素)、提示資訊和表單域3個部分構成。
表單控制元件:
包含了具體的表單功能項,如單行文字輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。
提示資訊:
一個表單中通常還需要包含一些說明性的文字,提示使用者進行填寫和操作。
表單域:
他相當於一個容器,用來容納所有的表單控制元件和提示資訊,可以通過他定義處理表單資料所用程式的url地址,以及資料提交到伺服器的方法。如果不定義表單域,表單中的資料就無法傳送到後臺伺服器。
input 控制元件
<input type="" value="" />
type 說明了屬於那種表單 value 預設值
所在地區:<input type="text" value="北京" />
<!-- 文字輸入框 -->
密碼:<input type="password" value="110120" maxlength="6" />
<!-- 密碼輸入框 -->
男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex" checked="checked" /> <!-- 單選框 -->
嫵媚 <input type="checkbox" name="love">
氣質 <input type="checkbox" name="love">
小鮮肉 <input type="checkbox" name="love" checked="checked" >
<!-- 複選框 -->
<input type="button" value="註冊"> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="image" src="btn.png" /> <input type="file" >
textarea控制元件(文字域)
text 文字框 只能寫一行文字呢
textarea 文字域
如果需要輸入大量的資訊,就需要用到textarea/textarea標籤。通過textarea控制元件可以輕鬆地建立多行文字輸入框,其基本語法格式如下:
<textarea cols="每行中的字元數" rows="顯示的行數">
文字內容
</textarea>
下拉選單
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
表單域
實現使用者資訊的收集和傳遞,form中的所有內容都會被提交給伺服器。建立表單的基本語法格式如下:
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控制元件
</form>
-
Action 在表單收集到資訊後,需要將資訊傳遞給伺服器進行處理,action屬性用於指定接收並處理表單資料的伺服器程式的url地址。
-
method 用於設定表單資料的提交方式,其取值為get或post。
-
name 用於指定表單的名稱,以區分同一個頁面中的多個表單