表单定义

HTML表单是一个包含表单元素的区域， 表单使用<form> 标签创建。

<form action="xxx" method="post">
表单元素
</form>

表单属性

- action{URL}：一个URL地址，指定form表单向何处发送数据。
- method ：指定表单以何种方式发送到指定的页面。
           指定的值有：get ：form表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。
　　　　　　           post ：form表单里所填的值，附加在HTML Headers上。
- target:在何处打开action属性中指定的URL所返回的结果。
- enctype:规定在发送表单数据之前，如何对表单数据进行编码。
          指定的值有：application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）；
　　　　　          　multipart/form-data ：不对字符编码。使用包含文件上传控件的表单时，必须使用该值

表单元素

1.单行文本框

<input type="text" name="名称">单行文本框
<input type="text" name="名称" value="123">文本框的默认初始值123
<input type="text" name="名称" size="40">文本框的宽度为40个字符

效果展示：

2.密码框

<input type="password" name="名称">密码框，输入后显示圆点
<input type="password" name="名称" placeholder="请输入密码">默认输入提示

效果展示：

3.单选框
单选框：name相同的一组单选按钮，不同radio设定不同的value值，
只能选择一个选项。

性别：<input type="radio" name="sex" value="男">男    
     <input type="radio" name="sex" value="女">女
 

效果展示：

性别：<input type="radio" name="sex" value="男" checked>男    
     <input type="radio" name="sex" value="女">女
 加入`checked`作为默认选择，此处性别默认选择男

效果展示：

4.多选框
多选框：name相同的一组复选按钮，复选按钮表单元素的元素值由value属性显式设置；
可以多个选项同时选择。

爱好：<input type="checkbox" name="hobby" value="read">读书
<input type="checkbox" name="hobby" value="music" checked>听歌
<input type="checkbox" name="hobby" value="study" checked>学习

效果展示：

5.隐藏域

隐藏域通常用于向服务器提交不需要显示给用户的信息。但会向后端提供一些信息，比如验证信息，以此来增加安全性。

<input type=“hidden” name=“隐藏域”>

6.文件上传
使用file，则form的enctype必须设置为multipart/form-data，method属性为post。

<input  type="file" name="MyFile" accept="text/*">

效果展示：

7.下拉框
<select>标记创建一个列表框,<option>标记创建一个列表项,<select>与嵌套的<option>一起使用，共同提供在一组选项中进行选择的方式

<select name="city”>
   <option value="beijing">北京</option>
   <option value="shanghai" selected>上海</option>默认选择上海
   <option value="hangzhou">杭州</option>
 </select>

效果展示：

8.按钮

• 普通按钮
  普通按钮通常用于单击执行一段脚本代码

<input type="button" value="普通按钮">

• 提交按钮
  当用户单击提交按钮时，表单数据会提交给action指定的服务器处理程序。中文IE下默认按钮文本为“提交查询”，可以设置value属性修改按钮的显示文本。

<input type="submit" value="提交按钮">

• 重置按钮
  当用户单击重置按钮时，表单中的值被重置为初始值。在用户提交表单时，重置按钮的name和value不会提交给服务器。

<input type="reset" value="重置按钮">

效果展示：

9.多行文本
多行文本<textarea>创建一个可输入多行文本的文本框,<textarea>没有value属性，cols=“50”、rows=“15”属性表示行数和列数,不指定则浏览器采取默认显示。

<textarea name="article"  cols="30" rows="10">ddd</textarea>这是文本区域

效果展示：

<label for="username">姓名</label>
<input id="username" type="text" name="username">