HTML-表单（input）_html impunt表单-优快云博客

本文链接：https://blog.youkuaiyun.com/d1183/article/details/79698323

在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。
语法：

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属性适用的标签有<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：空格转换为 "+"（加号），但不对特殊字符编码。

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

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>