【温故知新】HTML学习笔记（下）
表單標(biāo)簽
表單的目的是收集用戶信息，在網(wǎng)頁中，也需要跟用戶進(jìn)行交互，收集用戶資料。
在HTML中，一個完整的表單通常由表單控件（也成為表單元素）、提示信息和表單域三個部分構(gòu)成。
1、input控件
其中主要屬性如下表所示：
| type | text password radio checkbox button submit? reset image file | 單行文本輸入框 密碼輸入框 單選按鈕 復(fù)選框 普通按鈕 提交按鈕 重置按鈕 圖形形式的提交按鈕 文件域 |
| name | 由用戶自定義 | 控件的名稱 |
| value | 由用戶自定義 | input控件中的默認(rèn)文本值 |
| size | 正整數(shù) | input控件在頁面中的顯示寬度 |
| checked | checked | 定義選擇控件默認(rèn)被選中的項(xiàng) |
| maxlength | 正整數(shù) | 控件允許輸入的最多字符數(shù) |
其中type屬性是類型，是最基本的屬性，其取值有多種，說明了屬于哪種表單。
radio如果是一組，必須給他們命名相同的名字，就是name屬性，這樣就可以完成單選功能了。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><table width="600" border="0" cellpadding="0" cellspacing="0" align="center"><caption><h3>青春無悔，戀愛趕緊</h3></caption><tr height="30"><td>所在地區(qū)</td><td><input type="text" value="北京" /></td></tr><tr height="30"><td>用戶名</td><td><input type="text" value="xiuxianhai" /></td></tr> <tr height="30"><td>密碼</td><td><input type="password" maxlength="6" /></td></tr> <tr height="30"><td>性別</td><td>男<input type="radio" name="sex" />女<input type="radio" name="sex" checked="checked" />妖<input type="radio" name="sex" /></td></tr> <tr height="30"><td>喜歡的類型</td><td>嫵媚<input type="checkbox" name="like" />氣質(zhì)<input type="checkbox" name="like" /> 騷俏<input type="checkbox" name="like" /> 狂野<input type="checkbox" name="like" /> 性感<input type="checkbox" name="like" /> </td></tr> <tr height="30"><td></td><td><input type="button" value="注冊" /><input type="submit" value="提交" /><input type="reset" value="重置" /></td></tr> <tr height="30"><td>上傳個人照片</td><td><input type="file" /></td></tr> </table> </body> </html>2、label標(biāo)簽
label標(biāo)簽為input元素定義標(biāo)注（標(biāo)簽），用于綁定一個表單元素，當(dāng)點(diǎn)擊label標(biāo)簽的時候，被綁定的表單元素就會獲得輸入的焦點(diǎn)。
for屬性規(guī)定了label與那個表單元素綁定。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><label> 用戶名：<input type="text"> </label><hr /><label for="pwd"> 用戶名：<input type="text" /> 密碼：<input type="password" id="pwd" /> </label> </body> </html>3、textarea控件（文本域）
如果有需要輸入大量的信息，需要用到textarea標(biāo)簽。
<tr height="30"><td>留言</td><td><textarea name="" id="" cols="50" rows="10">不支持富文本</textarea></td> </tr>4、下拉菜單
使用select控件定義下拉菜單。
<tr height="30"><td>年齡</td><td><select name="" id=""><option value="">請選擇年份</option><option value="" selected="selected">1988</option><option value="">1989</option><option value="">1990</option><option value="">1991</option><option value="">1992</option></select><select name="" id=""><option value="">請選擇月份</option><option value="">1月份</option><option value="">2月份</option><option value="">3月份</option><option value="">4月份</option><option value="">5月份</option></select></td> </tr>5、表單域
form標(biāo)簽用于定義表單域，即創(chuàng)建一個表單，以實(shí)現(xiàn)用戶信息的收集和傳遞。
form中主要有如下幾個屬性：
action：URL地址，傳輸給服務(wù)器處理的URL地址；
method：提交方式，用于設(shè)置表單的提交方式，有g(shù)et和post（匿名提交）；
name：表單名稱；
?
具體資料查詢可以參考如下網(wǎng)站：
https://www.w3school.com.cn/
https://developer.mozilla.org/zh-CN/
總結(jié)
以上是生活随笔為你收集整理的【温故知新】HTML学习笔记（下）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【温故知新】HTML学习笔记（表格）
- 下一篇： 【测试】ABAP发送HTML格式邮件FM