一、html表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、<form>标签 定义整体的表单区域

• action属性 定义表单数据提交地址
• method属性 定义表单提交的方式，一般有“get”方式和“post”方式

2、<label>标签 为表单元素定义文字标注

3、<input>标签 定义通用的表单元素

type属性：

• type="text" 定义单行文本输入框
• type="password" 定义密码输入框
• type="radio" 定义单选框
• type="checkbox" 定义复选框
• type="file" 定义上传文件
• type="submit" 定义提交按钮
• type="reset" 定义重置按钮
• type="button" 定义一个普通按钮
• type="image" 定义图片作为提交按钮，用src属性定义图片地址
• type="hidden" 定义一个隐藏的表单域，用来存储值

value属性：定义表单元素的值
name属性：定义表单元素的名称，此名称是提交数据时的键名

4、<textarea>标签
定义多行文本输入框

5、<select>标签
定义下拉表单元素

6、<option>标签
与<select>标签配合，定义下拉表单元素中的选项

二、注册表单实例

1.首先定义一个表单，再来个标题

<h1>注册表单</h1>
        <!-- action定义表单最后要提交的地址，method有两种：get和post-->
    <form action="http://www..." method="get">

关于 GET 的注释：
将表单数据以名称/值对的形式附加到 URL 中
URL 的长度是有限的（大约 3000 字符）
绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
对于用户希望加入书签的表单提交很有用
GET 更适用于非安全数据

关于 POST 的注释：
将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
没有长度限制
通过 POST 提交的表单不能加入书签

2.接下来让用户输入姓名，给出一个单行文本输入框

<div>
  <!-- type='text'为单行文本输入框-->
  <label>姓名：</label><input type="text" name="username" />
</div>

注册表单姓名.png

关于input name属性：
name 属性规定 <input> 元素的名称。
name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。
注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

3.定义一个密码输入框

<div>
  <!-- type="password"定义密码输入框，输入的内容是不可见的-->
  <label>密码：</label><input type="password" name="password" />
</div>

注册表单密码.png

4.定义性别选择

<div>
    <label>性别：</label>
    <!--type="radio" 定义单选框-->
    <!--设置男的value=0,女的value=1-->
    <input type="radio" name="gender" value="0" /> 男
    <input type="radio" name="gender" value="1" /> 女
</div>

注册表单性别.png

这里发现只有点在圆圈上才能选中，为了实现点击文字就能选中的功能，需要引入label的for属性，for属性可把 label 绑定到另外一个元素。

<div>
    <label>性别：</label>
    <!--type="radio" 定义单选框-->
    <input type="radio" name="gender" value="0" id="male"/> 
    <label for="male">男</label>
    <input type="radio" name="gender" value="1" id="female" />
    <label for="female">女</label>
</div>

现在我们直接点击文字就能实现选中效果
注：for属性的应用需要id属性来配合

5.爱好

<div>
    <label>爱好：</label>
    <!--type="checkbox" 定义复选框-->
    <input type="checkbox" name="like" value="sing" id="sing"/> <label for="sing">唱歌</label>    
    <input type="checkbox" name="like" value="run" id="run"> <label for="run">跑步</label>
    <input type="checkbox" name="like" value="swiming" id="swiming"/> <label for="swiming">游泳</label>
</div>

注册表单爱好.png

这里同样使用了上面的for属性

6.上传照片

<div>
    <!--type="file" 定义上传文件-->
    <label>照片：</label>
    <input type="file" name="person_pic">
</div>

注册表单上传文件.png

暂时还不知道怎么显示上传的照片，或者限制上传文件的大小

7.个人描述

<div>
    <!--<textarea>标签 定义多行文本输入框-->
    <label>个人描述：</label>
    <textarea name="about"></textarea>
</div>

注册表单个人介绍.png

这个文本框，按住右下角可以拖拽的，能调输入框的大小，感觉平时不怎么常见？

8.籍贯

<div>
    <label>籍贯：</label>
    <!--<select>标签 定义下拉表单元素,<option>标签 与<select>标签配合，定义下拉表单元素中的选项-->
    <select name="site">
           <option value="0">北京</option>
           <option value="1">上海</option>
           <option value="2">广州</option>
           <option value="3">深圳</option>
    </select>
</div>

注册表单籍贯.png

9.提交和重置按钮

<div>
    <!-- type="submit"定义提交按钮  
    还可以用图片控件代替submit按钮提交，但是会导致提交两次，不建议使用。如：
    <input type="image" src="xxx.gif"> -->
    <input type="submit" name="" value="提交">
        
    <!--type="reset" 定义重置按钮-->
    <input type="reset" name="" value="重置">

</div>

注册表单提交.png

10.大功告成

注册表单完整.png

加点换行符装饰一下