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，可以点击上下箭头调整数字大小，也可以直接在框内输入数字：
图片说明

个人主页点击框右侧的小箭头即可选择网址：
图片说明

点击“重填”表中所有信息就会回到初始值或空值：
图片说明