所在的位置: html >> html资源 >> HTML表单ltformgt输入

HTML表单ltformgt输入

表单标签的input标签,用于表单元素的输入。

type定义了输入类型。

常被用到的输入类型有文本框(text)、密码字段(password)、单选按钮(radio)、复选框(checkbox)、提交按钮(submit)。

1.文本框(text)

文本框通过inputtype="text"标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本框。

示例:

form

Name:inputtype="text"name="Name"

/form

form.html在浏览器中显示如下:

2.密码字段(password)

密码字段通过标签inputtype="password"来定义。

示例:

form

Password:inputtype="password"name="password"

/form

form.html在浏览器中显示如下:

Ps:密码字段字符不会明文显示,而是以星号或圆点替代。

3.单选按钮(radio)

inputtype="radio"标签定义了单选框选项。

示例:

form

inputtype="radio"name="sex"value="male"男br

inputtype="radio"name="sex"value="female"女

/form

form.html在浏览器中显示如下:

4.复选框(checkbox)

inputtype="checkbox"定义了表单复选框。用户需要从若干给定的选择中选取一个或若干个选项。

示例:

form

inputtype="checkbox"name="language"value="English"Englishbr

inputtype="checkbox"name="language"value="German"Germanbr

inputtype="checkbox"name="language"value="French"French

/form

form.html在浏览器中显示如下:

5.提交按钮(submit)

inputtype="submit"定义了提交按钮。

示例:

formaction="action.php"method="get"name="myForm"

Name:inputtype="text"name="Name"br/

inputtype="submit"value="submit"

/form

form.html在浏览器中显示如下:

HTML5中的新增datalist、keygen、output标签。

1.datalist标签

datalist标签规定了input元素可能的选项列表。

datalist标签被用来在为input元素提供"自动完成"的特性。

用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。

请使用input元素的list属性来绑定datalist元素。

示例:

formaction="action.php"method="get"name="myForm"

city:inputlist="city"

datalistid="city"

optionvalue="selectcity"

optionvalue="Beijing"

optionvalue="Shanghai"

optionvalue="Guangzhou"

optionvalue="Chongqing"

/datalist

inputtype="submit"value="submit"

/form

form.html在浏览器中显示如下:

Ps:InternetExplorer9(更早IE版本),Safari不支持datalist标签。

2.keygen标签

keygen标签规定用于表单的密钥对生成器字段。

当提交表单时,私钥存储在本地,公钥发送到服务器。

示例:

formaction="action.php"method="get"name="myForm"

用户名:inputtype="text"name="usr_name"br/

加密:keygenname="security"

inputtype="submit"

/form

form.html在浏览器中显示如下:

Ps:InternetExplorer不支持keygen标签。

3.output标签

output标签作为计算结果输出显示(比如执行脚本的输出)。

示例:

formoninput="x.value=parseInt(a.value)+parseInt(b.value)"0

inputtype="range"id="a"value="50"

+inputtype="number"id="b"value="50"

=outputname="x"for="ab"/output

/form

form.html在浏览器中显示如下:

Ps:Edge12及更早IE版本的浏览器不支持output元素。




转载请注明:http://www.aierlanlan.com/rzgz/6088.html