HTML输入属性的约束（input）

一.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
    };