表单元素

<form>定义表单

         <form method="get" action="http://www.baidu.com">

           用户名：<input  name="user">

           <button type="submit" >提交</button>

</form>

解释：<form>元素主要是定义本身是一组表单

action表示表单提交的页面,默认提交当前页面

method表示表单的请求方式：有POST和GET两种，默认GET

get   https://www.so.com/?user=11

post  https://www.so.com/

enctype 表示浏览器对发送给服务器的数据所采用的编码格式。有三种：application/x-www-form-urlencoded（默认编码，不能将文件上传到服务器）、multipart/form-data（用于上传文件到服务器）

name设置表单名称，以便程序调用,form提交的时候只提交input，不提交form表单

target设置提交时的目标位置：_blank、_parent、_self、_top

autocomplete设置浏览器记住用户输入的数据，实现自动完成表单。默认为on自动完成，如果不想自动完成则设置off。

<input>表示用户输入数据

<inputname="user">

解释：<input>元素默认情况会出现一个单行文本框

autofocus让光标聚焦在某个input元素上，让用户直接输入

disabled禁用input元素

autocomplete单独设置input元素的自动完成功能

form让表单外的元素和指定的表单挂钩提交

比如

电子邮件：<input name="email" form="register">

在form[register]的表单外，提交时,无法提交email的值，但在input加入form的属性，则在form[register]提交时，将提交email的值

name定义input元素的名称，以便接收到相应的值

<label>添加说明标签

       <label for="user">用户名：</label>

       <input id="user" name="user"  ><br>

或者

       <label>

       电子邮件：<input name="email" form="register">

       </label>

解释：<label>元素可以关联input，让用户体验更好。且更加容易设置CSS样式。而且点label就会在input上聚焦

<fieldset>对表单进行编组

       <fieldset>

           <label for="user">用户名：</label>

            <input id="user"   name="user" > <br>

            <label>

              电子邮件：<input name="email" >

           </label>

        </fieldset>

解释：<fieldset>元素可以将一些表单元素组织在一起，形成一个整体

name给分组定义一个名称

form让表单外的分组与表单挂钩

disabled禁用分组内的表单

<legend>添加分组说明标签

         <fieldset>

                   <legend>注册分组</legend>

          ……

         </fieldset>

解释：<legend>元素给分组加上一个标题

 

<button>添加按钮

<buttontype="submit"></button>

解释：<button>元素添加一个按钮

submit表示按钮的作用是提交表单，默认

reset表示按钮的作用是重置表单

button表示按钮为一般性按钮，没有任何作用,配合js处理

input type为text值

<input type="text" name="user" maxlength="10" size="30" value="bnbbs" readonly disabled>

解释：当type值为text时，呈现的就是一个可以输入任意字符的文本框，这也是默认行为。并且，还提供了一些额外的属性。

maxlength设置文本框最大字符长度

size设置文本框宽度

value设置文本框初始值

readonly文本框处于只读状态，也可以提交

disabled文本框处于禁用状态，整个文本框变为灰色，不可以提交

placeholder输入字符的提示

list指定为文本框提供建议值的datalist元素，其值为datalist元素的id值

<form >

<input type="text" list="abc" >

</form >

 

<datalist id="abc">

    <option value="1">苹果</option>

    <option value="2">桔子</option>

    <option value="3" label="香蕉">

    <option value="菠萝">

</datalist>

单击文本框

input type为password值

<input type="password" placeholder="请输入密码">

解释：当type值为password时，一般用于密码框的输入，所有的字符都会显示星号。密码框也有一些额外属性

input type为search值

<input type="search">

解释：和文本框一致，在除Firefox浏览器的其他现代浏览器，会显示一个叉来取消搜索内容。额外属性也和text一致。

input type为number、range值

<input type="number" min="10" max="100" step="2">

解释：只限输入数字的文本框，不同浏览器可能显示方式不同。生成一个数值范围文本框，只是样式是拖动式

input type为date系列

    <input type="date">

    <input type="month">

    <input type="time">

    <input type="week">

    <input type="datetime">

    <input type="datetime-local">

解释：实现文本框可以获取日期和时间的值，但支持的浏览器不完整。我们测试Chrome和Opera支持，其他浏览器尚未支持。所以，在获取日期和时间，目前还是推荐使用jQuery等前端库来实现日历功能。额外属性和number一致。

input type为color

<input type="color" name="color">

解释：实现文本框获取颜色的功能，最新的现代浏览器测试后IE不支持，其余的都能显示一个颜色对话框提供选择。

input type为checkbox、radio

         音乐<input type="checkbox" name="music" value="1">

         体育<input type="checkbox" name="sport" value="2">

提交时：…?music=1&sport=2

         <input type="radio" name="sex" value="1" checked>男

         <input type="radio" name="sex" value="2">女

提交时：…?sex=1

解释：生成一个获取布尔值的复选框或固定选项的单选框

input type为submit、reset和button

<input type="submit">

<input type="reset">

<input type="button">

解释：生成一个按钮，三种模式：提交、重置和一般按钮，和<button>元素相同。

submit生成一个提交按钮

reset生成一个重置按钮

button生成一个普通按钮

如果是submit时，还提供了和<button>元素一样的额外属性：formaction、formenctype、formmethod、formtarget和formnovalidate。

input type为image

<input type="image" src="img.png">

 

提交时：…/?x=225&y=66（坐标）

解释：生成一个图片按钮，点击图片就实现提交功能，并且传送了分区响应数据。图片按钮也提供了一些额外属性。

src指定要显示图像的URL

alt提供图片的文字说明

width图像的长度

height图像的高度

提交额外属性formaction、formenctype、formmethod、formtarget和formnovalidate。

input type为email、tel、url

 

解释：email为电子邮件格式、tel为电话格式、url为网址格式。额外属性和text一致。但对于这几种类型，浏览器支持是不同的。email支持比较好，现在浏览器都支持格式验证；tel基本不支持；url支持一般，

部分浏览器只要检测到http://就能通过。

input type为hidden

<input type="hidden" value="1" name="id">

提交时：…/?id=1

 

解释：生成一个隐藏控件，一般用于表单提交时关联主键ID提交，而这个数据作为隐藏存在。

input type为file

<input type="file" accept="image/gif">

解释：生成一个文件上传控件，用于文件的上传。额外提供了一些属性：

accept指定接受的MIME类型

required表明用户必须提供一个值，否则无法通过验证

生成下拉列表

         <select name="fruit"  >

                           <option value="1">苹果</option>

                            <option value="2" selected>香蕉</option>

                            <option value="3">桔子</option>

        </select>

提交时：…?fruit=2

解释：<select>下拉列表元素至少包含一个<option>子元素，才能形成有效的选项列表。<select>元素包含两个子元素<option>项目元素和<optgroup>分组元素，还包含了一些额外属性。

name设定提交时的名称

disabled将下拉列表禁用

form将表单外的下拉列表与某个表单挂钩

size设置下拉列表的高度，size=10，可以放10个

multiple设置是否可以多选

提交时：…?fruit=1&fruit=2

autofocus获取焦点

required选择验证，设置后必须选择才能通过

使用optgroup进行分组，label为分组名称

                   <optgroup label="水果">

                            <option value="1">苹果</option>

                            <option value="2" selected>香蕉</option>

                            <option value="3">桔子</option>

                   </optgroup>

                   <optgroup label="粗粮">

                            <option value="4">小米</option>

                            <option value="5">大米</option>

                            <option value="6">玉米</option>

                   </optgroup>

提交时：…?fruit=2&fruit=4

多行文本框

<textarea name="content" rows="20" cols="40" wrap="hard">请留下您的建议！</textarea>

解释：生成一个可变更大小的多行文本框。

属性如下：

name设定提交时的名称

form将表单外的多行文本框与某个表单挂钩

readonly设置多行文本框只读

disabled将多行文本框禁用

maxlength设置最大可输入的字符长度

autofocus获取焦点

placeholder设置输入时的提示信息

rows设置行数(高度)

cols设置列数（宽度）

wrap设置是否插入换行符，有soft和hard两种（默认值soft，使用hard时，换行时有个隐藏的换行符，提交时会将换行符也一起提交）

required设置必须输入值，否则无法通过验证

输入验证

<input type="text" required>

解释：必须填写一个值

<input type="number" min="10" max="100">

解释：限定在某一个范围内

<input type="text" placeholder="请输入区号+座机" pattern="^[\d]{2,4}\-[\d]{6,8}$">

解释：使用正则表达式

<form action="http://li.cc" novalidate >

解释：禁止表单验证