目录

编辑

什么是input标签：

input 标签中 type 属性取值有哪些 ？

单行输入框：

密码输入框：

单选按钮：

复选框：

普通按钮：

提交按钮：

重置按钮：

在日常生活中，我们总会遇见各种各样的调查问卷，像下面这样表格，我们自己也可以通过简单的HTML语言自己写出来，它主要就是由表单标签组成的；

什么是input标签：

        input标签是用于搜集用户的信息，根据不同的属性值，输入字段也有很多种形式，所以说input标签的值也有很多种，input标签的值是根据表单中的输入字段决定，输入的字段我们可以通过type来控制。 

语法： 

<input type="表单类型"/>

input 标签中 type 属性取值有哪些 ？

html5显示输入框 html输入框的值_前端

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

<input type="text"/>

常用属性：

属性

解释说明

value

设置默认情况下文本框显示的文字(默认值)

size

设置文本框的长度

maxlength

设置文本框中最多可以输入的字符数

 演示案例：

<form>
		姓名：<input type="text" value="这里输入您的名字" size="40"/>
	</form>

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

<input type="password"/>

属性：

 placeholder:占位符：在没输入密码之前提示用户输入文本；

演示案例：

密码：<input type="password" placeholder="请输入你的密码：">

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

<input type="radio"/>

演示案例： 

<form>
		性别
		<input type="radio" name="sex" value="男" checked  />男<!--checked为默认选项-->
		<input type="radio" name="sex" value="女" />女
	</form>

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

<input type="checkbox"/>

演示案例：

喜欢的类型：
    <label ><input type="checkbox">性感</label>
    <label ><input type="checkbox">萝莉</label>
    <label ><input type="checkbox">可爱</label>
    <label ><input type="checkbox">大叔</label>
    <label ><input type="checkbox">小鲜肉</label>
<!--lable标签作用：单击文字也可以做到单击选项的效果-->

普通按钮：普通按钮常常配合JavaScript脚本语言使用，初学者了解即可。

<input type="button"/>

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

<input type="submit"/>

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

<input type="reset"/>

演示：

<form>
		账号：<input type="text" /> <br />
		密码：<input type="password" /> <br />
		<input type="reset" value="重新填写"  />
	</form>

文件域：当定义文件域时，页面中将出现一个“选择文件”按钮和提示信息文本，用户可以通过单击按钮然后直接选择文件的方式，将文件提交给后台服务器。

<input type="File"/>

我很庆幸我有这样的想法，因为它可以使我不断接近我想到达的彼岸。