input
input是我们使用的最多的表单项，它可以 根据不同的type属性呈现不同的状态。
type属性可选值：
text：文本框
password：密码框
submit：提交按钮
radio：单选按钮
checkbox：多选框
reset ：重置按钮
select、option
select用于创建一个下拉列表。
option表示下拉列表中的列表项。
optgroup用于为列表项分组。
textarea
textarea用来创建一个文本域，实际效果和 文本框类似，只是可以输入多行数据。
可用属性：
cols：文本域的列数
rows：文本域的行数
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就是把你请求的东西打个包,提高了安全性,传输大的内存时--><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>
网友评论