HTML和CSS示例（五）——表单
表单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单示例</title>
<style>
#form {
margin: auto;
border: 1px solid #999;
background: #fffff8;
font-size: 10.5pt;
width: 500px;
padding: 5px;
}
div {
margin: 12px 0;
}
div.submit {
margin-left: 150px;
}
#caption {
font-size: 14pt;
color: #36c;
text-align: center;
font-weight: bold;
}
label.field {
display: block;
float: left;
width: 120px;
text-align: left;
margin-left: 20px;
}
label.required {
font-weight: bold;
}
input {
font-size: 10.5pt;
}
</style>
</head>
<body>
<form action="form_action.asp" method="post" name="form1">
<div id="form">
<div id="caption">用 户 注 册</div>
<div>
<label class="required field" for="user">用户名：</label>
<input type="text" name="user" autofocus required>
</div>
<div>
<label class="required field" for="password1">密码：</label>
<input type="password" name="password1">
</div>
<div>
<label class="required field" for="password2">重复密码：</label>
<input type="password" name="password2">
</div>
<div>
<label class="field">性别：</label>
<input type="radio" name="sex" value="男"><label>男</label>
<input type="radio" name="sex" value="女"><label>女</label>
</div>
<div>
<label class="field" for="birthday">出生日期：</label>
<input type="date" name="birthday">
</div>
<div>
<label class="field" for="age">年龄：</label>
<input type="number" name="age" value="20" min="18" max="30">
</div>
<div>
<label class="field">所在地：</label>
<label>省份</label>
<select name="province" style="width:80px;">
<option value="0">请选择</option>
<option value="江西">江西</option>
<option value="广东">广东</option>
<option value="湖北">湖北</option>
<option value="湖南">湖南</option>
<option value="四川">四川</option>
</select>
<label>城市</label>
<select name="city" style="width:80px;">
<option>请选择</option>
</select>
</td>
</div>
<div>
<label class="field" for="phone">手机号码：</label>
<!--placeholder：示例值-->
<input type="tel" name="phone" pattern = "13\d{9}" placeholder="格式：13×××××××××">
</div>
<div>
<label class="field" for="email">E-mail：</label>
<input type="email" name="email">
</div>
<fieldset style="border: 1px solid #ccc;">
<legend>其他信息资料</legend>
<div>
<label class="field">兴趣爱好：</label>
<!--type="checkbox"复选框-->
<input type="checkbox" name="interest" value="唱歌"><label>唱歌</label>
<input type="checkbox" name="interest" value="游戏"><label>玩游戏</label>
<input type="checkbox" name="interest" value="电影"><label>看电影</label>
<input type="checkbox" name="interest" value="围棋"><label>围棋</label>
<input type="checkbox" name="interest" value="桥牌"><label>桥牌</label>
</div>
<div>
<label class="field" for="mycolor">喜欢的颜色：</label>
<input type="color" name="mycolor">
</div>
<div>
<label class="field" for="eng">英语水平：</label>
很差<input type="range" name = "eng" value="50" min="0" max="100" step = "10">很好
</div>
<div>
<label class="field" for="homepage">个人主页：</label>
<input type="url" list="url_list" name="homepage" size="36">
<datalist id="url_list">
<option label="Baidu" value="http://www.baidu.com" />
<option label="Google" value="http://www.google.com" />
<option label="runoob" value="https://www.runoob.com" />
</datalist>
</div>
<div>
<label class="field" for="myfile">文件：</label>
<input type="file" name="myfile">
</div>
<div>
<!--textarea id=" "多行文本-->
<label class="field" for="summary">自我简介：</label>
<textarea id="summary" rows="4" cols="40"></textarea>
</div>
</fieldset>
<div class="submit">
<input type="submit" value="提 交" style="width:80px;">
<input type="reset" value="重 填" style="width:80px;">
</div>
</div>
</form>
<br>
<div id="info"></div>
</body>
</html>①<form action="form_action.asp" method="post" name="form1">：
form的特性action：提交后对数据的处理、method：发送服务器的方式、name（id）
post：将数据隐藏在HTTP头中
②<label class="required field" for="user">用户名：</label>：
每一个表单控件使用一个新的<label>元素
for：特性的值应该与对应表单控件的name/id特性值相同</label>
③ <input type="text" name="user" autofocus required>：
单行文本输入控件.特性值为“text”，
name：必要特性，提供向服务器发送的“名称/值”对中的名称部分，值为用户输入
autofocus：当页面打开时自动对焦该控件
required：提交时，如果元素中内容为空白不允许提交，同时在浏览器中会弹出提示文字。
④<fieldset style="border: 1px solid #ccc;"> <legend>其他信息资料</legend>：
fieldset在表单控件四周加边框
legend：显示在表单控件组的标题
以上源代码生成的页面效果如下：
当点击日历小图标时，会弹出日历的界面供用户选择，最下面还有“今天”可选，点击后可以自动获取今天的年月日：
年龄初始值为20，可以点击上下箭头调整数字大小，也可以直接在框内输入数字：
个人主页点击框右侧的小箭头即可选择网址：
点击“重填”表中所有信息就会回到初始值或空值：
