input标签属性

1.用input输入文字

text型input元素可用的额外属性（比较特殊的）

dirname        指定元素内容文字方向的名称

list               指定为文本框建议提供建议值的datalist元素

2.用input元素输入密码

pattern        指定一个用于输入验证的正则表达式

required      表明用户必须输入一个值，否则无法通过输入验证

3.input元素为输入数据把关

checkbox     将输入限制在一个“是/否”，二态复选框中进行选择

color           只能输入颜色

date           只能输入日期

datetime     只能输入带时区信息的世界时

moth         只能输入年和月

rediobutton  将输入限制为一组固定选项中进行选择

range      只能输入指定范围内的数值

 

一些实例

<form action="" method="post">
<p>
<label for="name">
Name:<input placeholder="Your name" id="name" name="name" />
</label>
</p>
<p>
<label for="city">
City:<input placeholder="Where you live" name="city" id="city" />
</label>
</p>
<p>
<label for="fave">
Fruit:<input list="fruitlist" name="fave" id="fave" />
</label>
</p>
<p>
<label for="price">
$per unit in your area:
<input type="number" name="1" id="1" value="1" step="1" min="0" max="100"/>
</label>
</p>
<p>
<label for="price">
$per unit in your area:1
<input type="range" name="1" id="1" value="1" step="1" min="0" max="100"/>100
</label>
</p>
<p>
<label for="lastbuy">
when did you buy:
<input type="date" name="lastbuy" id="lastbuy" />
</label>
</p>
<p>
<label for="color">
Color:
<input type="color" id="color" name="color" />
</label>
</p>
<p>
<label for="serach">
Search: <input type="search" name="search" id="search" />
</label>
</p>
<input type="submit" value="submit"/>
</form>
<datalist id="fruitlist">
<option value="Apples" label="Lovely Apples"/>
<option value="orange">Refreshing Oranges</option>
<option value="Cherries"></option>
</datalist>

转载于:https://www.cnblogs.com/zhouIT/p/6971126.html