六 HTML-表单

一、表单概述

1、作用：

1. 用于为用户创建 HTML 表单,用于向服务器传输数据。
2. 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
3. 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

2、格式

  
First name: 
  
Last name: 
  

3、说明

1. 所有的表单内容，都要写在form标签里面
2. form标签中有两个比较重要的属性action和method以及enctype
   • action 提交地址（一般是服务器后台地址）
   • method 提交方式
   • enctype 设置采用什么样的形式提交数据

二 、标签

1、作用

标签用于为用户输入创建 HTML 表单

2、格式

3、常用属性：

1. name：表单提交时的名称
2. action：提交到的地址
3. method：规定用于发送 form-data 的 HTTP 方法，提交方式：get和post
4. enctype：规定在发送表单数据之前如何对其进行编码
   • application/x-www-form-urlencoded：在发送前编码所有字符（默认）
   • text/plain：空格转换为 "+" 加号，但不对特殊字符编码
   • multipart/form-data：使用包含文件上传控件的表单时，必须使用该值

4、总结

1. html form是表单区域标签，通常此标签内放输入框、单选、多选、多行文本框、下拉选项菜单等表单内容
2. form的action的值填写为将表单提交内容到后台控制层。

三 、input标签

1、作用

input标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

！！！如果说td是表格最核心的标签，那么input就是表单最核心的标签。 input标签有一个type属性，这个属性有很多类型的取值，取值的不同就决定了input标签的功能和外观不同。

2、格式

3、HTML4 Input 类型

3.1、明文输入框

1. 作用：
   用户可以在输入框内输入内容
2. 输入明文文本内容

   
     账号:
   
   

3. 给输入框设置默认值

   
     账号:
   
   
     密码:
   
   

4. 规定输入字段中的字符的最大长度

   
     密码:
   
   

3.2、暗文输入框

1. 作用：
   用户可以在输入框内输入内容
2. 示例代码

   
     密码:
   
   也可以指定默认值，也可以指定最大长度。
   

3.3、 单选框(radio)

1. 作用：
   用户只能从众多选项中选择其中一个
2. 单选按钮，
   天生是不互斥的，如果想互斥，必须要有相同的name属性
3. 示例

   篮球
   足球
   皮球
   排球
   铅球
   

>说明：value属性后期服务器获取值时才会用到

3.4、多选框(checkbox)

1. 作用：
   用户只能从众多选项中选择多个
2. 复选框，
   最好也是有相同的name（虽然他不需要互斥）
3. 示例

   篮球
   足球
   皮球
   排球
   铅球
   

3.5、按钮(button)

1. 作用：
   定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本，触发js事件）
2. 格式：

3.6、 图片按钮(image)

1. 作用：
   定义图像形式的提交按钮
2. 格式

3.7、 重置按钮(reset)

1. 作用：
   定义重置按钮。重置按钮会清除表单中的所有数据
2. 格式：

3. 说明：
   • 这个按钮不需要写value自动就有“重置”文字
   • reset只对form表单中表单项有效果

3.8、 提交按钮(submit)

1. 作用：
   定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面
2. 格式：

3. 说明：
   • 这个按钮不需要写value自动就有“提交”文字
   • 要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性
   • 默认明文传输(GET)不安全，可以将method属性设置为POST改为非明文传输(学到Ajax再理解)
4. 示例代码：

   
       账号: 
   
       密码: 
   
       
   
   

3.9、 图片按钮(image)

1. 作用
   定义图像形式的提交按钮
2. 格式：

3. 说明
   与submit效果类似，只不过是图片按钮。

3.10、多行文本框(textarea)

1. 作用:
   textarea标签用于在表单中定义多行的文本输入控件
2. 格式：

3.11、隐藏域(hidden)

1. 作用：
   定义隐藏的输入字段（一般用于传递隐藏数据，用的不多）
2. 格式：

3.12、下拉框(select)

1、属性disable：禁止选中
2、属性select=“selected”：默认选中

    奔驰
    宝马
    奥迪
    路虎
    玛莎拉蒂
    宾利
     兰博基尼

请输入你的车型: 

说明：

在js代码中,清除option的操作：
1、直接使用Dom操作的remove删除
var select_ele = document.getElementByid("select_id");
var children = select_ele.children;
for(var i = 0;i

3.13、文件上传（file）

1、用于文件上传，默认是单文件，如果想上传多个文件 加上multiple属性
2、格式：

单文件上传
多文件上传
只上传图片 

4、HTML5智能表单

1. type = "email" 限制用户输入必须为Email类型
2. type="url" 限制用户输入必须为URL类型
3. type="date" 限制用户输入必须为日期类型
4. type="datetime" 显示完整日期 含时区
5. type="datetime-local" 显示完整日期 不含时区
6. type="time" 限制用户输入必须为时间类型
7. type="month" 限制用户输入必须为月类型
8. type="week" 限制用户输入必须为周类型
9. type="number" 限制用户输入必须为数字类型
10. type="range" 生成一个滑动条
11. type="search" 具有搜索意义的表单results="n"属性
12. type="color" 生成一个颜色选择表单
13. type="tel" 显示电话号码

5、HTML5新增表单属性

1. required:内容不能为空
2. placeholder 表单提示信息

3. autofocus:自动聚焦
4. pattern: 正则表达式 输入的内容必须匹配到指定正则范围
5. autocomplete:是否保存用户输入值
   • 默认为on，
   • 关闭提示选择off
6. formaction: 在submit里定义提交地址
7. datalist: 输入框选择列表配合list使用 list值为datalist的id值
8. output: 计算或脚本输出