前端基礎-HTML表單

• 2020 年 4 月 7 日
• 筆記

表單

表單的作用就是用來收集用戶輸入的資訊

表單的組成：表單域，表單元素

表單域標籤：<form></form>，放置所有的表單元素

表單元素：

1.文本框

可輸入明文內容的輸入框—-用戶名

<input type="text" maxlength="6">

多學一招：maxlength屬性可以限制最大輸入長度，為了讓伺服器端接收到輸入的數據，表單元素都需要加name屬性

2.密碼框

輸入密文的輸入框—-密碼

<input type="password">

密碼框的屬性和使用和文本框一樣

3.單選框

只能選擇一項的表單—-性別選擇

<input type="radio" value="0">

注意：要想單選框的單選功能生效，必須添加name屬性，並且name屬性的值必須一樣，這種無法輸入的表單元素必須賦值：value=「值」，默認選中項使用checked="checked"屬性

程式碼

<input type="radio" name="sex" value="0">男  <input type="radio" name="sex" value="1" checked>女

4.複選框

可以選擇多項的表單—-愛好選擇

<input type="checkbox" value="0">

使用方式和屬性與單選框一樣

示例程式碼

<input type="checkbox" />足球  <input type="checkbox" />排球  <input type="checkbox" checked />籃球

5.文件上傳

<input type="file">

6.下拉菜單

通常用於選擇籍貫或收貨地址中的省市區

<select>  	<option>江蘇</option>      <option>浙江</option>      <option>安徽</option>  </select>

默認選中項使用selected=「selected」

多學一招：下拉菜單可以分組展示

程式碼

<select>  		<optgroup label="省份">  			<option value="1">山東省</option>  			<option value="2">河北省</option>  			<option value="3" selected>河南省</option>  		</optgroup>  		<optgroup label="行業">  			<option value="1">IT互聯網</option>  			<option value="2">製造業</option>  			<option value="3" selected>零售業</option>  		</optgroup>  		<optgroup label="薪資範圍">  			<option value="1">1000~3000元/月</option>  			<option value="2">3000~5000元/月</option>  			<option value="3" selected>5000~8000月</option>  		</optgroup>  	</select>

7.文本域

可以輸入很多的內容—-qq的留言輸入框

<textarea></textarea>

程式碼

<textarea></textarea>

多學一招：文本域可以通過兩個屬性來設置大小，寬度使用cols屬性，高度使用rows屬性

8.普通按鈕

點擊不會有任何效果

<input type="button" value="普通按鈕">

9.提交按鈕

用於提交表單的按鈕

<input type="submit">

多學一招：該按鈕點擊後默認會將表單的數據提交

10.重置按鈕

將表單的輸入狀態還原的按鈕

<input type="reset">

多學一招：該按鈕點擊後會將表單的輸入狀態還原到最初

表單域

標籤：<form></form>

作用：將表單元素的值收集起來，發送給伺服器，form標籤的action屬性的值就是數據提交的地址

第一次提交，沒有數據，因為很多表單元素都沒有name屬性，伺服器接收數據靠的就是表單的name屬性

注意：form是一個雙標籤，裡面包含所有需要一次性提交給伺服器的表單元素

程式碼

<form>      用戶名：<input type="text" name="username" />      密碼：<input type="password" name="password" />      <input type="submit" />  </form>