表单元素与input元素及属性

表单应用

表单的构成：

一个完整的表单通常需要表单控件也称为表单元素，提示信息和表单域3个部分构成。

表单控件：包括了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框。

提交信息：一个表单通常还需要包括一些说明性文字，提示用户进行填写和操作。

表单域：相当于一个容器，用来容纳所有表单和提示信息，可以通过它定义、处理表单数据所用程序的url地址及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传达到后台服务器。

创建表单：

表单属性

1.action属性

在表单收集信息后，需要将信息传递到服务器处理，action属性用于指定接受并处理表单数据的服务器程序的url地址

2.method属性

method属性用于设置表单数据的提交方式，其取值为get或post。在thml5中，可以通过form标记的method属性指明表单处理服务器处理数据的方法

3.name属性

name属性用于指定的表单名称，以区分同一个页面的多个表单

4.autocomplete属性

autocomplete属性用于指定表单是否有自动完成功能。所谓自动完成是指表单控件输入内容记录下来，当再次输入时，会将输入历史记录显示在一个下拉列表里，以实现自动完成输入

5.novalidate属性

novalidate属性指定在递交表单时取消表单进行有效的检查。为表单设置该属性时，可以关闭震哥哥表单的验证，这样可以使from内的所有表单空间不被验证。

表单属性

1.action属性

在表单收集信息后，需要将信息传递到服务器处理，action属性用于指定接受并处理表单数据的服务器程序的url地址

2.method属性

method属性用于设置表单数据的提交方式，其取值为get或post。在thml5中，可以通过form标记的method属性指明表单处理服务器处理数据的方法

3.name属性

name属性用于指定的表单名称，以区分同一个页面的多个表单

4.autocomplete属性

5.novalidate属性

在HTML5中，<input>元素拥有多个type属性值，用于定义不同的控件类型。

1.单行文本输入框<inpit type="text"/>

单行文本输入框用来输入简短的信息，如用户名、账号、证件号码等，属性有name、value、maxlenght。

2.密码输入框<input type="password">

密码输入框用来输入密码，其内容将以圆点的形式显示

3.单选按钮<input type="radio">

单选按钮用于单项选择，如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样单选才会生效，也可以对单选按钮应用checked属性，指定默认选中项

4.复选框<input type="checkbox">

复选框多用于多项选择，如选择兴趣、爱好等，可对其应用checked属性，指定默认选中项

5.普通按钮<input type="button">

普通按钮常常配合javascript脚本语言使用

6.提交按钮<input type="submit">

提交按钮是表单中的核心控件，用户完成信息输入后，一般都需要单机点击提交按钮才能完成表单数据的提交。可以对其应用value属性，改变提交按钮上的默认文本

7.重置按钮<input type="reset">

当用户输入的信息有错误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用value属性，改变重置按钮上的默认文本

8.图像形式的提交按钮<input type="image">

图像形式的提交按钮与普通按钮的功能上基本相同，只是它用图像代替了默认的按钮，外观上更加美观。需要注意的是，必须为其定义src属性指定图像的url地址

9.隐藏域<input type="hidden">

隐藏域对于用户是不可见的，通常用于后台的程序

10.文件域<input type="file">

当定义文件域时，页面中将出现一个文本框和一个浏览按钮用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
<form action="#"method=""post></form>
用户名：
<input type="text"value="张三"maxlenght="6"><br>
密码：
<input type="password"size="40"><br>
性别:
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex" />女
兴趣：
<input type="checkbox">唱歌
<input type="checkbox">跳舞
<input type="checkbox">游泳<br>
上传头像：
<input type="file"><br>
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
<input type="image"src="images/login.gif">
<input type="hidden">
</body>
</html>