html6 表单与其应用

1 表单简介

1.1 什么是表单？

1.表单是一个包含表单元素的区域。
2.表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

1.2 表单的基本结构

表单中的一个input元素(这是一个单标签元素)决定了表单里某个控件的类型
<form>
<input或其他标签 指定控件类型和一些属性>
</form>

1.3 通用的表单属性

html元素通用的属性表单也可以使用，例如
1.type属性指定控件的类型。可以是text(可编辑的文本字段)，password（密码字段），radio（单选按钮），checkbox（复选按钮），submit（提交按钮），等等
2.name属性指定表单元素的中的一组一组的控件。如果表单要正确地被提交，每个输入字段必须设置一个 name 属性。。
例如一个输入文本框就是一个也是一组控件，name相同的多个单选框radio是一组控件。
3.action,method属性在页面交互时再说。
4.value属性对于不同的控件类型作用不一样

1.4 html5中新加的属性

下面的属性针对于input

1.4.1 约束属性

1.required 属性：要求这个控件必须有输入值，不能为空。
2.pattern属性：传递进去一个正则表达式，要求输入的内容必须与正则表达式匹配

1.4.2 自动获得属性

1.placeholder属性，控件获得焦点的时候显示的输入示例。
2.autofocus属性，页面加载时自动获得焦点
3.autocomplete属性，自动根据浏览器原本的值获得文本框的值

2.<input>容器

详细的各种控件
http://www.runoob.com/tags/att-input-type.html
<input type=“控件名字” 。。。其他属性>

2.1.简单的文本输入

2.1.1 text文本输入

1.一个text只是一个简单的单行文本框。
2.value表示文本框中默认内容。

<INPUT type="text" name="text1" value="000" >

扫描二维码关注公众号，回复： 5784954 查看本文章

2.1.2 password密码输入

1.一个password只是简单的单行密码，可以设置密码
2.value表示password的默认内容
3.可以通过maxlength属性设置密码最大字符数

<INPUT type="password" name="password1" value="000" maxlength="8">

2.2.选择性文本

2.2.1 radio单选

1.一组单选按钮必须有相同的name，value的作用是在同一组单选按钮中区分不同的按钮
2.可以设置checked表示默认选择，可以直接写checked，也可以写checked=“checked”

    <INPUT type="radio" name="radio1" checked="checked">单项选择选项1
    <!--<INPUT type="radio" name="radio" checked>选项1-->
    <INPUT type="radio" name="radio1">单项选择选项2

2.2.2 checkbox多选

1.一组多按钮必须有相同的name，value的作用是在同一组单选按钮中区分不同的按钮
2.可以设置checked表示默认选择，可以直接写checked，也可以写checked=“checked”

    <input type="checkbox" name="checkbox1" checked>复选框1
    <input type="checkbox" name="checkbox2" checked>复选框2
    <input type="checkbox" name="checkbox3" checked>复选框3

2.3 按钮

本质上submit和reset都是特殊的button类型

2.3.1 submit按钮

1.有一些相应的动作，这个与页面的切换、js有关，以后再说

2.3.2 reset按钮

1.清除自己所属于的表单的数据，恢复到页面刚开始的情况，value可以改变按钮显示的内容

<input type="reset" name="reset" value="清除">

2.3.3 button按钮

自定义的按钮，点击时调用oncllick属性的js函数，value指示标签显示的内容。

<input type="button" value="点我" onclick="msg()">

2.4 特殊格式的数据选择

2.3.1 date

选择日期

2.3.2 time

选择时间

2.3.3 number

点点选择数字
max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。

生日: <input type="date" name="date1">
    时间: <input type="time" name="time1">
    数字:<input type="number" name="number1" min="1" max="20" step="2" value="10">
    <

2.5 特殊格式的数据输入

本质还是正则表达式的匹配，这里的控件在

2.4.1 email

2.4.2 tel

2.4.3 url

在点击提交按钮的时候，如果输入的值不符合规范就会报错。

    <p>输入特殊类型的数值</p>
    <input type="email" name="email1">
    <input type="url" name="url1">
    <input type="tel" name="tel1">

2.6 其他用处的控件

2.6.1 range

<input type="range" max="100" min="0" step="2" value="10">

滑动条，通过value值获取他的数值大小
max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。

2.6.2 image

相当于图标型的submit按钮，一般用作点击使页面跳转

<input type="image" src="1.jpg" >

3.其他容器

INPUT容器是表单中使用最多的容器，不常用的容器还有下面这些

3.1 SELECT容器

1
<select> 定义了下拉选项列表
<optgroup> 定义选项组，组的名字会加粗大写，但不会被选中
<option> 定义下拉列表中的选项，各个选项可以被选中
2.可以通过selected选择默认选项，默认选中第一个选项

<select>
    <optgroup  label="group1">
        <option value="1">1</option>
        <option value="2">2</option>
    </optgroup>
    <optgroup label="group2">
        <option value="3" selected>3</option>
        <option value="4">4</option>
    </optgroup>
</select>

3.2TEXTAREA容器

输入空间<textarea> 定义文本域 (一个多行的输入控件),给定长和宽和默认内容

<form>
    <textarea rows="10" cols="30">
    我是一个文本框。
</textarea>
</form>

3.3 DATALIST容器

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

3.4 OUTPUT容器

<datalist>New 指定一个预先定义的输入控件选项列表
<keygen>New 定义了表单的密钥对生成器字段
<output>New 定义一个计算结果

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

3.5 Button容器