input元素(表单控件)

<input=" "/>

input元素里有各种各样的担当不同控制(功能)的属性,作为表单(<form>~</form>)的控件使用。

属性

1、type属性
type属性用于指定表单控件的种类。input元素根据type属性值,可以是一行文本文件输入框、可以是选择框、可以单选框。
【type属性的可选值:】
2、autocomplete属性新属性
autocomplete内容属性用于定义是否自动完成文字输入,即自动完成功能的有效化或无效化。
3、list属性新属性
在文字输入时,使用list 内容属性指定推荐选项集合体的id值,从而建立推荐选项列表。通常与datalist元素配合使用。
4、readonly内容属性
readonly内容属性用于内容只读,属于逻辑属性。input元素中使用了该属性后,用户只能阅读,不能编辑该当内容。
5、size内容属性
使用size内容属性指定该当控件的尺寸,即能够容纳的文字数。
6、required内容属性新属性
使用required内容属性控制控件的值是否是必须的,属于逻辑属性。
7、multiple内容属性
multiple内容属性用于定义该当控件内能够指定2个以上的复合值,属于逻辑属性。
8、maxlength内容属性
使用maxlength内容属性可以指定控件内能够输入的最大文字数。
9、pattern内容属性新属性
pattern内容属性表示控件的输入值的正规表现。通过使用正规表现,可以详细限制输入值得具体形式。
10、min内容属性与max内容属性
min内容属性与max内容属性分别代表输入值的最小值和最大值。min内容属性与max内容属性能够指定的值因type内容属性的值不同而不同。
11、step内容属性新属性
step内容属性用于指定控件的值的精度。
12、placeholder内容属性新属性
placeholder内容属性用于表示向用户做出的提示文字。
13、autofocus内容属性新属性
autofocus内容属性用于当网页下载完成时,光标落在设有该属性的控件上。属于逻辑属性。
14、disabled内容属性
disabled内容属性用于使该当控制领域无效。
15、form内容属性新属性
form内容属性用于使input表示的控制领域与指定的form元素建立链接。
16、name内容属性
name内容属性用于表示控件的名称。
17、value内容属性
valus内容属性表示该当input元素的值。如果指定了该内容属性,其值会作为默认值在页面上显示。

使用例

<form action="#.php" method="post">

<p><label>邮箱地址:(type="email"):<input type="email" name="email"></label></p>

<p><label>URL:(type="url"):<input type="url" name="url"></label></p>

<p><label>检索:(type="search"):<input type="search" name="search"></label></p>

<p><label>电话:(type="telephone"):<input type="tel" name="tel"></label></p>

<p><label>数字:(type="number"):<input type="number" name="number"></label></p>

<p><label>日期:(type="date"):<input type="date" name="date"></label></p>

<p><label>日期时间:(type="datetime"):<input type="datetime" name="datetime"></label></p>

<p><label>当地时间:(type="datetime-local"):

<input type="datetime-local" name="datetime-local"></label></p>

<p><label>月:(type="month"):<input type="month" name="month"></label></p>

<p><label>周:(type="week"):<input type="week" name="week"></label></p>

<p><label>时间:(type="time"):<input type="time" name="time"></label></p>

<p><label>区间:(type="range"):<input type="range" name="range"></label></p>

<p><label>颜色:(type="color"):<input type="color" name="color"></label></p>

<p><label>密码:(type="password"):<input type="password" name="pass"/></label></p>

<p><label>选择框:(type="checkbox"):

<input type="checkbox" name="agree" value="1"/>同意</label></p>

<p>单选按钮:(type="radio"):

<label><input type="radio" name="gender" value="male"/></label>

<label><input type="radio" name="gender" value="female"/></label>

</p>

<input type="submit" value="提交"/>

</form>

浏览器上的显示结果↓



单选按钮:(type="radio"):

浏览器支持情况

元素
input yes yes yes yes yes