简单的HTML使用3（表单和列表）

1.表单

<form> 元素定义 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

1.1 表单的属性

属性	值	功能
action	URL	规定当提交表单时向何处发送表单数据。
method	get post	规定用于发送 form-data 的 HTTP 方法。
target	_blank _self _parent _top framename post	规定在何处打开 action URL。

1.2 改变表单内元素类型

我们可以通过改变<input>元素的type属性的值，来改变表单内元素类型。

值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
date	定义一个可选择的日期选择列表
email	定义一个邮箱地址

1.3 例子：用户注册

现在，我们还需要一点补充知识。
1.当使用radio类型的input元素时，我们应该给同一组的radio以相同的name，以区分radio的组（checked属性用于设置默认选中的选项）。
2.在<form>标签中使用<select>标签，可以创建选择列表。可以通过<option>标签为选择列表添加选项。
代码如下：

<select>
     <option selected>--请选择--</option>
     <option>你是谁？</option>
     <option>你爸是谁？</option>
     <option>你妈是谁？</option>
</select>

运行结果，如图：

但这还不够，有时我们还需要在一个选择列表中制造一种多级的效果。这时，我们就需要创建<optgroup>，给<opiton>分组。
代码如下：

  地址:<select>
   <option selected>--请选择--</option>
   <optgroup label="吉林省">
    <option value="">长春市</option>
   </optgroup>
   <optgroup label="黑龙江省">
    <option>大庆市</option>
   </optgroup>
   <optgroup label="辽宁省">
    <option>沈阳市</option>
   </optgroup> 
   <optgroup label="安徽省">
    <option>芜湖市</option>
   </optgroup> 
  </select>

运行结果，如图：

现在，我们已经可以做一点东西了，让我们用刚才学到的东西来写个注册页面，代码如下：

  <form action="" method="post" style="text-align: center;">
   <h2>用户注册</h2>
   账号：<input type="text"><br>
   密码：<input type="password"><br>
   性别：<input  type="radio" name="gender" checked/>男
      <input  type="radio" name="gender"/>女<br>
   年龄：<input type="text"><br>
   身份证：<input type="text"><br>
   密码问题：<select>
     <option selected>--请选择--</option>
     <option>你是谁？</option>
     <option>你爸是谁？</option>
     <option>你妈是谁？</option>
    </select><br />
   密码答案：<input type="text"><br>
   email地址：<input type="text"><br>
   爱好：<input type="checkbox"/>抽烟
      <input type="checkbox" />喝酒
      <input type="checkbox" />烫头<br>
   头像：<input type="file"><br>
   个人简介：<input type="text"><br>
   <input type="submit" value="提交"/><input type="reset" value="重置"/>
  </form>

运行结果，如图：

不错，不错，现在看起来，我们能做点东西了，但是现在的页面还很不整齐，所以我们还要做点修改。我们可以使用表格的方式，把页面变整齐。
代码如下：

  <form action="" method="post">
      <table border="1" align="center">
    <tr>
     <th colspan="2">用户注册</th>
    </tr>
          <tr>
              <td><label for="account">账号:</label></td>
              <td><input type="text" id="account"></td>
          </tr>
  
          <tr>
              <td><label for="password">密码:</label></td>
              <td><input type="password" id="password" ></td>
          </tr>
    
    <tr>
        <td><label>性别：</label></td>
        <td><input  type="radio" name="gender" checked>男
      <input  type="radio" name="gender"/>女</td>
    </tr>
    
          <tr>
              <td><label for="age">年龄:</label></td>
              <td><input type="text" id="age"></td>
          </tr>
  
          <tr>
              <td><label for="IDcard">身份证：</label></td>
              <td><input type="text" id="IDcard"></td>
          </tr>
  
          <tr>
              <td><label>密码问题:</label></td>
              <td><select>
       <option selected>--请选择--</option>
       <option>你是谁？</option>
       <option>你爸是谁？</option>
       <option>你妈是谁？</option>
      </select></td>
          </tr>
  
          <tr>
              <td><label for="password_answer">密码答案:</label></td>
              <td><input type="text" id="password_answer">
              </td>
          </tr>
  
          <tr>
              <td><label for="email">email地址：</label></td>
              <td><input type="email" id="email"></td>
          </tr>
  
          <tr>
              <td><label>爱好：</label></td>
              <td><input type="checkbox"/>抽烟
      <input type="checkbox" />喝酒
      <input type="checkbox" />烫头
              </td>
          </tr>
    <tr>
        <td><label for="profile">头像：</label></td>
        <td><input type="file" id="profile"> </td>
    </tr>
    
    <tr>
        <td><label for="intro">个人简介：</label></td>
        <td><input type="text" id="intro"></td>
    </tr>
    <tr align="center">
     <td colspan="2">            
     <input type="submit" value="提交">
     &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
     <input type="reset" value="重置">
     </td>
     </tr>
      </table>
  </form>

从代码可以看出<input>可以作单标签使用。
这里因为提交和重置会贴在一起，所以需要使用转义字符&nbsp来输出空格。
运行结果，如图：

2.列表

2.1 无序列表

我们可以使用<ul> 标签(unordered list)创建无序列表，用<li>标签为其添加项，通过type属性改变标识的形状。

type的值

disc

square

circle

举例代码如下：

  <ul type="disc">
   <li>java</li>
   <li>.net</li>
   <li>C++</li>
  </ul>

效果如图：

2.2 有序列表

我们可以使用<ol> 标签创建有序列表，用<li>标签为其添加项，通过type属性改变标识的形状。type属性，例如数字，大写字母，小写字母。
举例代码如下：

  <ol type="A">
   <li>java</li>
   <li>.net</li>
   <li>C++</li>
  </ol>

效果如图：

2.3 定义列表

我们可以使用<dl> 标签创建定义列表（definition list），用<dt>标签为其添加组，用<dd>标签为其添加项，通过type属性改变标识的形状。

举例代码如下：

  <dl>
   <dt>吉林省</dt>
   <dd>长春市</dd>
   <dd>白城市</dd>
   <dt>安徽省</dt>
   <dd>芜湖市</dd>
   <dd>合肥市</dd>
  </dl>

效果如图：