HTML-表单(input)

在HTML5中,
标签用于创建可供用户输入数据的HTML表单,标签提供了一个容纳各种表单元素的区域。
在构成的区域里可以包含一个或多个表单元素,比如:button、input、textarea等表单元素。 
一个最基本的表单由一对
构成,它们是创建表单的基础,再配合上各类表单元素就可以生成满足不同需要的表单了。

标签本身具有很多属性,为表单提供了各项功能 。

1.action属性
对于form标签来说,只有action属性是必须设置的,因为它指定了接收或者处理表单数据的目标地址,如果没有指定action属性,表单数据也就没有了去向,表单也失去了意义。
语法:

……

在这个示例中,该表单中的数据在提交后,会送到getform.asp这个动态网页去处理。

2.autocomplete属性
autocomplete属性是HTML5新出现的属性,该属性规定了form或者input表单时候拥有自动完成的功能
autocomplete属性可用于

标签,以及以下类型的标签:text、search、url、telephone、email、password、datepickers、range以及color。
语法:

3.method属性
method属性规定当前表单如何发送表单数据到action属性指定的地址页面。method属性可以取两个值get和post,分别代表两种传送数据的方式。
get方式会以查询字符串的形式随着url地址发送,该方法将表单数据以表单名和数据值配对的形式附加到URL地址当中。这种提交方式每次传输的数据量是有限制的,由于受到URL长度的限制,只能传递大约1024字节的数据,适合小批量的数据传送。在你选择时,一定记住不要用 "get" 方式来传输重要的敏感信息,因为在地址栏会显示出所有的内容。

post方式以HTTP post事务的方式来传递表单数据,与get方式相比,post方式适合传送大批量数据,而且更加安全


4.novalidate属性
novalidate属性也是HTML5出现的一个新属性,这个属性设置在提交时是否要对某个表单进行验证。novalidate属性有一个值:novalidate。当你需要屏蔽掉验证时,可以为这个表单加上这个属性。
novalidate属性适用的标签有,还有以下类型的标签:text、search、url、telephone、email、password、date pickers、range以及 color。

5.enctype属性
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码
如:enctype="multipart/form-data"。
application/x-www-form-urlencoded:在发送前对所有字符进行编码(默认)。
multipart/form-data:不对字符进行编码,尤其是在使用包含文件上传控件的表单时,必须使用该值。
text/plain:空格转换为 "+"(加号),但不对特殊字符编码。

以上的东西比较生僻,不要求完全记牢!

Input 标签

在表单中,一个重要的标签就是标签,它提供了让用户输入数据的方式。

在HTML5中,input标签要比以前拥有更多的新输入类型,为用户提供了更好的输入控制和验证,在这一节会全面介绍这些新的输入类型。
语法:
标签取不同的 type属性值时,可以呈现多种形态的输入方式,比如:文本框、密码框、复选框、单选按钮、按钮等等,表7-1中列出了这些新增的 input 元素类型。

HTML-表单(input)_第1张图片

实例:





用户姓名:


用户密码:

HTML-表单(input)_第2张图片

输入“张三”直接就显示了,输入密码是,则以“.”代替。

接下来 Input相关的“submit”与“reset”,提交与重置。


radio (单选)

选择你的性别
男生
女生
   

checkbox (复选)

你喜欢哪些水果?
西瓜
苹果

image (图片样式的提交按钮)

以上总的代码:




用户姓名:

用户密码:



选择你的性别
男生
女生


你喜欢哪些水果?
西瓜
苹果



你可能感兴趣的:(HTML-表单(input))