input
input是我們使用的最多的表單項,它可以 根據(jù)不同的type屬性呈現(xiàn)不同的狀態(tài)。
type屬性可選值:
text:文本框
password:密碼框
submit:提交按鈕
radio:單選按鈕
checkbox:多選框
reset :重置按鈕
select、option
select用于創(chuàng)建一個下拉列表。
option表示下拉列表中的列表項。
optgroup用于為列表項分組。
textarea
textarea用來創(chuàng)建一個文本域,實際效果和 文本框類似,只是可以輸入多行數(shù)據(jù)。
可用屬性:
cols:文本域的列數(shù)
rows:文本域的行數(shù)
fieldset、legend、label
fieldset用來為表單項進行分組。
legend用于指定每組的名字。
label標簽用來為表單項定義描述文字
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<form action="target.html" method="get"><!--post就是把你請求的東西打個包,提高了安全性,傳輸大的內(nèi)存時--><fieldset><!--用來分組-->
<legend>用戶信息</legend><!--指定分組名-->
<label for="um">用戶名</label>
<input id="um" type="text" name="username" placeholder="提示信息,只能輸入字母">
<br>
<label for="psw">輸密碼</label>
<input id="psw" type="password" name="password">
</fieldset>
<br>
<fieldset>
<legend>愛好</legend>
性別<input id="nan" type="radio" name="gender" value="male">
<label for="nan">男</label>
<input id="nv" type="radio" name="gender" value="female">
<label for="nv">女</label><!--單選的type是radio-->
<br>
愛好<input type="checkbox" name="hobby" value="zq">足球
<input type="checkbox" name="hobby" value="lq" checked="checked">籃球
<input type="checkbox" name="hobby" value="pq">排球<!--多選的type是checkbox-->
<input type="checkbox" name="hobby" value="yumq">羽毛球
</fieldset>
<br>
<!--默認顯示checked="checked"-->
你喜歡的明星
<select name="star" ><!--multiple多選的下拉框multiple="multiple"-->
<optgroup label="男明星">
<option value="hg">胡歌</option>
<option value="zes">張二嫂</option>
<option value="fxg">馮小剛</option>
</optgroup>
<optgroup label="女明星">
<option value="sn">謝娜</option>
<option value="zly">趙麗穎</option>
</optgroup>
</select>
<br>
自我介紹<textarea name="info"></textarea><!--多行文本域-->
<br>
<input type="submit" value="注冊">
<input type="reset" name="">
</form>
</body>
</html>