3.表格標簽
在HTML中 , 一個完整的表單通常由表單域 , 表單控制元件(也稱為表單元素)和提示資訊3個部分構成 .
表單域
表單域是個包含表單元素的區域.
在HTML標簽中 , <form>標簽用于定義表單域 ,以實作用戶資訊的收集和傳遞.
<form>會把它范圍內的表單元素資訊提交給服務器.
<form action="url地址" method="提交方式" name="表單域名稱">
各種表單元素控制元件
</form>
常用屬性
屬性 屬性值 作用
action url地址 用于指定接收并處理表單資料的服務器程式的url地址.
method get/post 用于設定表單資料的提交方式 , 其取值為get或post.
name 名稱 用于指定表單的名稱 ,以區分同一個頁面中的多個表格單域.
表單控制元件(表單元素)
1.<input>標簽用于收集用戶資訊
在<input>標簽中, 包含一個type屬性值, 輸入欄位擁有很多種形式(可以是文本欄位、復選框、掩碼后的文本控制元件、單選按鈕、按鈕等)
<input type="屬性值"/>
1.<input/>標簽為單標簽
2.type屬性設定不同的屬性值用來指定不同的控制元件型別
type屬性的屬性值及其描述如下:
button 定義可點擊按鈕(多數情況下,用于通過Javascript啟動腳本)
checkbox 定義復選框
file 定義輸入欄位和"瀏覽"按鈕,供檔案上傳
hidden 定義隱藏的輸入欄位
image 定義影像形式的提交按鈕
password 定義密碼欄位,該欄位中的字符被掩碼
radio 定義單選按鈕
reset 定義重置按鈕,重置按鈕會清除表單中的所有資料
submit 定義提交按鈕,提交按鈕會把表單資料發送到服務器
text 定義單行的輸入欄位,用戶可在其中輸入文本,默認寬度為20個字符
input標簽其他屬性
屬性 屬性值 描述
name 由用戶自定義 定義input元素的名稱
value 由用戶自定義 規定input元素的值
checked checked 規定此input元素首次加載時應當被選中
maxlengh 正整數 規定輸入欄位中的字符的最大長度
1.name和value時每個表單元素都有的屬性值, 主要給后臺人員用
2.name表單元素的名字, 要求單選按鈕和復選框要有相同的name值
3.checked屬性主要針對于單選按鈕和復選框. 主要作用一打開頁面,就要可以默認選中某個表單元素.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>無序串列</title>
</head>
<body>
<form>
<!--text 文本框 用戶可以里面輸入任何文字-->
用戶名：<input type="text" name="username" value="請輸入用戶名" maxlength="6"> <br/>
<!-- password 密碼框 用戶看不見輸入的密碼-->
密碼：<input type="password" name="pwd"> <br/>
<!-- radio 單選按鈕 可以實作多選一-->
<!--name 是表格單元素名字 這里性別單選按鈕必須有相同的名字name才可以實作多選一-->
<!--單選按鈕和復選框可以設定checked屬性，當頁面打開的時候就可以默認選中這個按鈕-->
性別：男<input type="radio" name="sex"> 女<input type="radio" name="sex" checked="checekd"> <br/>
<!-- checkbox 復選框 可以實作多選-->
愛好：吃飯<input type="checkbox" name="hobby"> 睡大覺<input type="checkbox" name="hobby"> 打游戲<input type="checkbox"name="hobby">
</form>
</ul>
</body>
</html>
(1)設定表單元想剛打開就默認顯示幾個文字
用戶名:<input type="text" value="請輸入用戶名"/>
(2)區別頁面中不同的表單元素
用戶名:<input type="text" value="請輸入用戶名"name="username"/>
name屬性后面的值, 是自定義的
radio(或者checkbox)如果是一組,我們必須給他們命名相同的名字
<input type="radio" name="sex">
<input type="radio" name="sex"
(3)設定頁面一打開就讓某個單選按鈕或者復選框是選中狀態
<input type="radio" name="sex" value="男" checked="checked"/>
<input type="radio" name="sex" value="女"/>
(4)設定表單元素展示不同的形態
例如:<input type="radio" name="sex" value="男" checked="checked"/>
<input type="radio" name="sex" value="男" checked="checked"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>無序串列</title>
</head>
<body>
<form action="xxx.php" method="get">
<!--text 文本框 用戶可以里面輸入任何文字-->
用戶名：<input type="text" name="username" value="請輸入用戶名" maxlength="6"> <br/>
<!-- password 密碼框 用戶看不見輸入的密碼-->
密碼：<input type="password" name="pwd"> <br/>
<!-- radio 單選按鈕 可以實作多選一-->
<!--name 是表格單元素名字 這里性別單選按鈕必須有相同的名字name才可以實作多選一-->
<!--單選按鈕和復選框可以設定checked屬性，當頁面打開的時候就可以默認選中這個按鈕-->
性別：男<input type="radio" name="sex"> 女<input type="radio" name="sex" checked="checekd"> <br/>
<!-- checkbox 復選框 可以實作多選-->
愛好：吃飯<input type="checkbox" name="hobby"> 睡大覺<input type="checkbox" name="hobby"> 打游戲<input type="checkbox"name="hobby"><br/>
<!--點擊了提交按鈕，可以把表單域from里面的表單元素里面的值提交給后臺服務器-->
<input type="submit" value="免費注冊">
<!--重置按鈕可以還原表單元素初始的默認狀態-->
<input type="reset" value="重新填寫">
<!--普通按鈕 button 后期結合js搭配使用-->
<input type="button" value="獲取短信驗證碼"><br/>
<!--檔案域 使用場景 上傳檔案使用的-->
上傳頭像：<input type="file">
</form>
</ul>
</body>
</html>
點擊免費注冊可跳轉另一個頁面 ,點擊重新填寫會清空所填內容
<label>標簽
<label>標簽為input元素定義標注(標簽)
<label>標簽用于系結一個表單元素, 當點擊<label>標簽內的文本時, 瀏覽器就會自動將焦點(游標)轉到或者選擇對應的表單元素上, 用來增加用戶體驗
語法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
核心:<label>標簽的for屬性應當與相關元素的id屬性相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label標簽</title>
</head>
<body>
<label for="text">用戶名:</label> <input type="text" id="text"><br/>
<input type="radio" id="nan"><label for="nan">男</label>
<input type="radio" id="nv"><label for="nv">女</label>
</body>
</html>
只要點擊表單元素就會選擇,增加了點擊面積來增加用戶體驗
<select>表單元素
在頁面中, 如果有多個選項讓用戶選擇, 并且想要節約頁面空間時,我們可以使用<select>標簽控制元件定義下拉串列
語法:
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
1.<select>中至少包含一對<option>
2.在<option>中定義select="select"時, 當前項即為默認選中項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select標簽</title>
</head>
<body>
<form>
籍貫：
<select>
<option>山東</option>
<option>廣東</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>
<textarea>表單元素
使用場景:當用戶輸入內容較多的情況下, 我們就不能使用文本框了,此時我們可以使用<textarea>標簽.
在表單元素中 ,<textarea>標簽是用于定義多行文本輸入的檔案.
使用多行文本輸入控制元件,可以輸入更多的文字,該控制元件常見于留言板,評論.
語法:
<textarea rows="3" cols="20">
文本內容
</textarea>
1.通過<textarea>標簽可以輕松地創建多行文本輸入框.
2.cols=“每行中的字符數” , rows=“顯示的行數” ,實際開發不會用到,都是用CSS來改變大小.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>textarea標簽</title>
</head>
<body>
<form>
今日反饋：
<textarea>
<!--在這里輸入文本內容打開頁面后默認顯示文本-->
</textarea>
</form>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277342.html
標籤：其他