第六天筆記-表單標籤(input控制元件、label標籤)
(十一)表單標籤
目的是為了收集使用者資訊。
在HTML中,一個完整的表單通常由表單控制元件(也稱為表單元素)、提示資訊和**表單域**3個部分構成。
(表單域是指一個很大的表單區域,裡面包含了表單控制元件和提示資訊。)
1、input控制元件
在上面的語句中<input />
是一個單標籤,type屬性是其最基本的屬性,
<input />
標籤還可以定義其他很多的屬性,其常用屬性如下圖表:
input控制元件的常用屬性圖表
語法格式:提示語:<input type="屬性值" />
*(1)單選按鈕和複選按鈕
單選按鈕:例:
性別:<input type="radio" name="sex" />女 <input type="radio name="sex" />男
*注:如果是一組,我們通過相同的name值來實現。
單選按鈕(可以同時選擇多個):例:
愛好:<input type="checkbox" name="hobby"/>足球 <input type="checkbox" name="hobby"/>籃球.......
*(2)預設選中的表單屬性
checked=”checked”
例:“愛好預設選擇足球”
愛好:<input type="checkbox" name="hobby" checked="checked" />足球
*(3)按鈕組
①普通按鈕
搜尋:<input type="button" value="搜尋" />
②提交按鈕
<input type="submit" />
③重置按鈕
<input type="reset" value="重置表單" />
④影象按鈕
<input type="image" src="...." />
⑤檔案域
<input type="file" />
input控制元件例項程式碼圖
input控制元件例項效果圖
*(4)最多字元數和文字值
①最多字元數 maxlength
例:“密碼框最多能輸入6位數”
<input type="password" maxlength="6" />
②input控制元件中的預設文字值 value
例:“文字框中預設文字為‘使用者名稱’”
<input type="text" value="使用者名稱" />
2、label標籤
label標籤為input元素定義標註
作用:用於繫結一個表單元素,當點選label標籤的時候,被繫結的表單元素就會獲得輸入焦點。
使用label標籤的方法:
①直接用label標籤對input進行包裹:
<label> 輸入賬號:<input type="text" /> </label>
②如果label裡面有多個表單,想定位到某一個,就通過for id的格式來進行:
<label for="two"> 輸入賬號:<input type="text" /> <input type="text" id="two" /> </label>
label標籤例項程式碼圖
label標籤例項效果圖