表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向做事器传输数据。
下面
一样平常会被用来在为<input> 元素供应\"大众自动完成\"大众的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。
我们来演示一个案例,大家就知道怎么用了:
上面这个小代码,我们看得出,input标签的list属性值和datalist标签的id是一样的,没错,它们便是这样来相互关联起来的。当它们结合起来之后,不仅可以像select标签一样可以通过下拉来选择已有的选项,还可以根据用户输入的字符,对选项进行匹配筛选。
效果图如下:
有了datalist标签,我们实现这种效果起来十分大略,不须要任何的JavaScript代码也能轻松实现。
<output>标签:
标签定义不同类型的输出。比如脚本的输出、一些加减乘除的运算结果,我们都可以利用这个标签。
我们来举个例子:输入的数字乘以2后得到的结果,我们用output输出显示。
我们用oninput属性监听着表单的变革,并把得到的结果赋值到output标签的value。我们来看看效果图:
个中,output标签是可以离开form表单标签的,但是,如果你这样做的话,必须给output标签添加form属性,其属性值是与其干系联form表单的id。
我们来将output移到form表单的表面试试:
<form id=\"大众demo\"大众 oninput=\"大众b.value = parseInt(a.value)2\"大众> <input type=\"大众number\"大众 name=\公众a\"大众> 乘以2=</form><output form=\"大众demo\公众 name=\"大众b\"大众 for=\公众a\"大众></output>
跟上面的代码有几惩罚歧之处,form标签多了一个id,值为“demo”,output标签被移到了form标签表面,不再是form标签的子节点,变成了兄弟节点(当然你可以把它移到文档的其他位置)。output标签还多了一个form属性,此时,它的值恰好是form标签的id值:“demo”。这种写法,代码同样是见效的。
<keygen>标签
这个标签相信大家很少用到,但是也是为了学习,我们来理解一下就好。
这个标签规定用于表单的密钥对天生器字段。当提交表单时,私钥存储在本地,公钥发送到做事器,这种机制是专为利用基于Web的证书管理系统。
我在MDN(Mozilla Developer Network)的网站上看到了关于它的一些先容:
There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.
大意是:目前各大浏览器厂商还在谈论是否要保留它,在谈论结束之前,你最好还是别用它。
而另一段话则是更加直接明了:
This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.
大意是:虽然有些浏览器还支持它,但是这个特性已经被移除出web标准了,往后别利用它了。