表单语法

<form method="post"（规定如何发送表单数据 常用值：get|post）

action="result.html">（表示向何处发送表单数据）

<p> 名字：<input name="name" type="text" > </p>

<p> 密码：<input name="pass" type="password" > </p>

<p>

<input type="submit" name="Button" value="提交"/>

<input type="reset" name="Reset" value="重填“/>

</p>

</form>

经验：在实际网页开发中通常采用post方式提交表单数据

表单元素格式

语法：

表单元素

文本框-语法

密码框-语法单选按钮-语法男女复选框-语法运动聊天玩游戏列表框-语法
     
      …
      
       …按钮-语法
       
       
         图片按钮 
       多行文本域-语法
       
        文本内容 文件域-语法
        
  
         
  
        
邮箱-语法
        
邮箱:
        注意：会自动验证Email地址格式是否正确网址-语法
        
请输入你的网址:
        注意：会自动验证URL地址格式是否正确数字-语法
        
请输入数字:
        滑块-语法
        
请输入数字:
        搜索框-语法
        
请输入搜索的关键词:
         表单的高级应用隐藏域-语法
        只读和禁用-语法
        
        表单元素的标注1.增强鼠标的可用性2.自动将焦点转移到与该标注相关的表单元素上语法
        标注的文本
         
       
      
     

表单类型

email

此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.

<input type=email >

url

要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.

<input type=url >

number

要求输入格式数字，默认会有上下两个按钮，opera支持更好

<input type=number >

tel

此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.

<input type=tel >

range

此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.

<input type=range min=20 max=100 step=2 >

color

此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中,可以设置默认值

<input type=color value=#ff0000 >

date, time, datetime, datetime-local, month, week

这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.

1. <input type=date >
2. <input type=time >
3. <input type=datetime >
4. <input type=datetime-local >
5. <input type=month >
6. <input type=week >

time

<input type=time >

datetime

<input type=datetime >

datetime-local

<input type=datetime-local >

month

<input type=month >

week

<input type=week >

search

此类型表示输入的将是一个搜索关键字,通过results=s 或者 x-webkit-speech 可显示一个搜索小图标. [在chrome下才能看得见]

<input type=search results=s > 

required

表单验证属性为require类型时,若输入值为空,则拒绝提交,并会有一个提示.这个很有用.并且可以用于textarea以及hidden/image/submit类型.

<input type=text required >

pattern

pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.

<input type=email required pattern=\w+@[a-z0-9]+\.[a-z]+/g >

placeholder

这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,标准浏览器都能很好的支持.

<input type=text placeholder="your message" >

autofocus

默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().

<input type=text autofacus="true" >

list

该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.

1. <input type="text" list="ilist">
2. <datalist id="ilist">
3.     <option label="a" value="a">aaaaa</option>
4.     <option label="b" value="b">bbbbb</option>
5.     <option label="c" value="c">ccccc</option>
6. </datalist>

autocomplete

此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.

<input type=text autocomplete="on" >

keygen

keygen 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。所有主流浏览器都支持 keygen 标签，除了 Internet Explorer 和 Safari。

<keygen name="keygen" />

datalist

datalist 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。 用 input 元素的 list 属性来绑定 datalist。

<label for="search">搜索引擎</label> 

<input type="url" name="search" id="search" list="searchlist" autocomplete="on" pattern="https?://.+" />

<datalist id="searchlist">

　　<option value="http://www.baidu.com/" >

　　<option value="http://www.google.com/" >

　　<option value="http://www.sogou.com/" >

</datalist>

output

output 标签定义不同类型的输出，比如脚本的输出。

演示地址：

meter

meter 标签定义度量衡。仅用于已知最大和最小值的度量。

演示地址：

progress

progress 标签定义运行中的进度（进程）。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进度。

演示地址：

contenteditable

此属性可以让摸个元素里面的文本节点或值变为可编辑

<p contenteditable="true" >可以编辑的内容</p>

可以编辑的内容

form表单演示

搜索  请输入搜索内容

加密强度

用户名 

Email 

密码 

年龄 

身高 

生日 

颜色 

下载进度： 标签。

搜索引擎 

你的位置：  >  > 表单