一.disabled:输入的元素不可用,默认为可用
可以输入:<input type="text"><br>
不可输入:<input disabled=true type="text">
二.max/min:输入元素的最大值 / 输入元素的最小值
<form action="demo_form.php" method="post">
<br><input type="number" min="1" max="5">
<input type="submit" value="提交">
</form>
三.pattern:输入元素值的模式
四.required:输入元素字段是必需的
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
五.type:输入元素的类型
input的type总共有11种:
- text:只能输入文本信息,
maxlength
属性只对text/password
类型的input有效 - number:只能输入数字信息
- button:展示为按钮样式,可以通过设置value属性来设置button上展示的文本信息,onClick属性指定点击按钮执行的操作
- hidden:定义隐藏输入字段
- file:可以选择文件,通过设置accept属性来过滤可以选择的文件
- image:图片点击按钮,alt属性设置点击图片的动作,alt属性只配合type是image类型的input使用
- radio:单选按钮
- checkbox:复选框
- password:输入框展示的是密码形式
- reset:重置按钮会清除表单的所有数据
- submit:用于项目服务器发送表单数据,数据会发送到表单的action属性中制定的页面
- date:类型允许你从一个日期选择器选择一个日期
- datetime-local:允许你选择一个日期和时间 (无时区)
- month :允许你选择一个月份
- week:允许你选择周和年
- time: 允许你选择一个时间
- range :用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条
<p></p>
<input type="range" defaultValue="50" id="myrange" onchange="getvalue()">
function getvalue() {
document.getElementsByTagName("p")[0].innerHTML = document.getElementById("myrange").value;
}
- email:用于应该包含 e-mail 地址的输入域
- search:用于搜索域
- url:用于应该包含 URL 地址的输入域
- color:用在input字段主要用于选取颜色
<input type="color" id="color">
document.getElementById("color").onchange = function() {
document.body.style.backgroundColor = this.value
};