HTML-表单(input)

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

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

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

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

2.autocomplete属性
autocomplete属性是HTML5新出现的属性,该属性规定了form或者input表单时候拥有自动完成的功能
autocomplete属性可用于<form>标签,以及以下类型的<input>标签:text、search、url、telephone、email、password、datepickers、range以及color。
语法:

<form action="" method="get" autocomplete="on">

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

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

<form action="" method="get" autocomplete="on">

4.novalidate属性
novalidate属性也是HTML5出现的一个新属性,这个属性设置在提交时是否要对某个表单进行验证。novalidate属性有一个值:novalidate。当你需要屏蔽掉验证时,可以为这个表单加上这个属性。
novalidate属性适用的标签有<form>,还有以下类型的<input>标签: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:空格转换为 "+"(加号),但不对特殊字符编码。

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

扫描二维码关注公众号,回复: 2439904 查看本文章

Input 标签

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

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


实例:

<html>
<body>

<form action="getform.asp" method="get" autocomplete="on">
用户姓名:<input type="text" name="unname" />
<br/><br/>
用户密码:<input type="password" name="upass" />

</form>

</body>
</html>

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

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

<input type="submit" value="提交" />
<input type="reset" value="重置" />

radio (单选)

选择你的性别</br>
<input type="radio" name="radiogroup" value="男生" />男生
		<br />
<input type="radio" name=" radiogroup " value="女生" />女生	<br />
<input type="submit" value="提交" />
   

checkbox (复选)

你喜欢哪些水果?<br/>
<input type="checkbox" name="checkgroup" value="西瓜" />
西瓜<br/>
<input type="checkbox" name="checkgroup" value="苹果" />
苹果<br/>
<input type="submit" value="提交" />

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

<input type="image" src="img_submit.gif" alt="Submit" />

以上总的代码:

<html>
<body>

<form action="getform.asp" method="get" autocomplete="on">
用户姓名:<input type="text" name="unname" />
<br/><br/>
用户密码:<input type="password" name="upass" />

<br/><br/>
<input type="submit" value="提交" />
<input type="reset" value="重置" />

<br/><br/>

选择你的性别</br>
<input type="radio" name="radiogroup" value="男生" />男生
		<br />
<input type="radio" name=" radiogroup " value="女生" />女生	<br />
<input type="submit" value="提交" />


<br/><br/>
你喜欢哪些水果?<br/>
<input type="checkbox" name="checkgroup" value="西瓜" />
西瓜<br/>
<input type="checkbox" name="checkgroup" value="苹果" />
苹果<br/>
<input type="submit" value="提交" />

<br/><br/>
<input type="image" src="img_submit.gif" alt="Submit" />


</form>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/d1183/article/details/79698323