2022年form表单中input控件最详细总结语法
<input type="" name="" id="" value="" placeholder=""/>
属性
type：判断输⼊信息的类别，此属性值必须写，不写默认是text⽂本信息（text、password、radio、）name：标明该input名称，可⽤于设置radio单选操作
size：输⼊框的长度⼤⼩
maxlength：输⼊框中允许输⼊字符的最⼤数
readonly ：表⽰该框中只能显⽰，不能添加修改
autocomplete ：是否保存⽤户输⼊值，值为on(默认)或off
autofocus ：获取⽂本框焦点
required ：设置⽂本框为必填内容
pattern ：设置正则校验
value：给input输⼊框设置默认值
placeholder：⽂本提⽰信息，⽤来标注该input是⼲啥的
type属性
1.⽂本域（type="text"）
<form action="" method="" target="">
<!-- 默认type值为text⽂本输⼊框 -->
<input type="text"/>
</form>
注意：表单本⾝并不可见。同时，在⼤多数浏览器中，⽂本域的默认宽度是 20 个字符。
2.密码字段（type="password"）
<form action="" method="" target="">
<!-- 通过设置type值为password定义密码输⼊框 -->
<input type="password"/>
</form>
注意：密码字段字符不会明⽂显⽰，⽽是以星号或圆点替代。
3.单选按钮（type="radio"）
<form action="" method="" target="">
<!-- 通过设置type值为radio定义单选框 -->
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">⼥
</form>
注意：需要设置radio并将name属性的值写成⼀致实现单选
4.复选框（type="checkbox"）
<form action="" method="" target="">
<!-- 通过设置type值为checkbox定义复选框 -->
<input type="checkbox"/>路飞
<!-- 设置checked属性可以默认勾选 -->
<input type="checkbox" checked/>索隆
<input type="checkbox"/>娜美
</form>
注意：设置checked属性表⽰默认选中
5.时分（type="time"）
<form action="" method="" target="">
<!-- 通过设置type值为time定义时间选择器 -->
<input type="time"/>
</form>
6.年周（type="week"）
<form action="" method="" target="">
<!-- 通过设置type值为week定义周选择器-->
<input type="week"/>
</form>
7.年⽉（type="month"）
<form action="" method="" target="">
<!-- 通过设置type值为month定义⽉份选择器-->
<input type="month"/>
</form>
8.年⽉⽇（type="date"）
<form action="" method="" target="">
<!-- 通过设置type值为date定义⽇期选择器-->
<!-- 通过value可以设置默认时间 -->
<input type="date" value="2022-01-10">
<input type="date"/>
</form>
注意：可以通过value值来设置默认时间
9.年⽉⽇时分（type="datetime-local"）<form action="" method="" target="">
<!-- 通过设置type值为datetime-local选择⽇期信息-->
<input type="datetime-local"/>
</form>
10.⽂件上传（type="file"）
<form action="" method="" target="">
<!-- 通过设置type值为file可以上传本地⽂件-->
<input type="file"/>
</form>
注意：设置multiple -- 可以选择多个⽂件，然后提⽰⽤户选中了⼏个⽂件
11.电⼦邮箱（type="email"）
<form action="" method="" target="">
<!-- 通过设置type值为email-->
<input type="email"/>
<input type="submit" value="提交">
</form>
注意：输⼊不是邮箱时，⽆法提交，并⾃动给予提⽰
12.选择颜⾊（type="color"）
<form action="" method="" target="">
<!-- 通过设置type值为color，可以选择颜⾊-->
<input type="color"/>
<input type="submit" value="提交">
</form>
13.⽹址输⼊框（type="url"）
<form action="" method="" target="">
<!-- 通过设置type值为url输⼊⽹址-->
<input type="url"/>
<input type="submit" value="提交">
</form>
注意：输⼊不是⽹址时，⽆法提交，并⾃动给予提⽰
14.可清除输⼊框（type="search"）
<form action="" method="" target="">
<!-- 通过设置type值为search-->
<input type="search"/>
<input type="submit" value="提交">
</form>
注意：设置type类型为search，仍是⽂本框，只是右边多了⼀个x，点击可以直接清空⽂本框内容
15.数字输⼊框（type="number"）
<form action="" method="" target="">
<!-- 通过设置type值为number，定义只能输⼊数字的⽂本框-->
<input type="number"/>
</form>
注意：设置type类型为number，⽂本框只能输⼊数字，其他字符⼀律不能输⼊，并且右侧可以对数字进⾏增减
16.隐藏⽂本框（type="hidden"）
<form action="" method="" target="" name="f">
<!-- 通过设置type值为hidden，隐藏⽂本框-->
<input type="hidden" value="hello" name="hiddenInfo"/>
</form>
<script type="text/javascript">
alert("隐藏域的值为："+document.f.hiddenInfo.value)
</script>
注意：设置type类型为hidden，通常称为隐藏域，在页⾯⽆法查看输⼊框在哪⼉
17.进度条（type="range"）
<form action="" method="" target="" name="f">
<!-- 通过设置type值为range，定义进度条-->
<input type="range" step="1" min="0" max="10"  value="5"/>
</form>
min：最⼩值
max：最⼤值
step：步数
value：当前步数
这⾥解释下step属性，以上⾯例⼦为例：
  设置了最⼤致为10，step为1，则需要10步才能填满
  max不变，如果将step设置为2，则需要5步才能填满
  max不变，如果将step设置为3，因为最⼤为10，所以只能⽤3步到9的位置，还余1，则不能填满
18.普通按钮（type="button"）
<form action="" method="" target="" name="f">
<!-- 通过设置type值为button为普通按钮-->
<input type="button" value="普通按钮"/>
htmlradio设置默认的按钮<!-- 也可以通过button控件设置 -->
<button type="button">按钮</button>
</form>
19.重置按钮（type="reset"）
<form action="" method="" target="" name="f">
<input type="text"/>
<!-- 通过设置type值为reset定义重置按钮-->
<input type="reset" value="重置"/>
<!-- 也可以通过button控件设置 -->
<button type="reset">重置</button>
</form>
注意：输⼊内容后，点击重置按钮会清空form表单，所有内容都将被清空
20.提交按钮（type="submit"）
<form action="" method="" target="" name="f">
<input type="text"/>
<!-- 通过设置type值为submit定义提交按钮-->
<input type="submit" value="提交"/>
<!-- 也可以通过button控件设置 -->
<button type="submit">提交</button>
</form>
注意：输⼊内容后，点击提交按钮会提交到form表单指定的地址中
21.图⽚（type="image"）
<form action="xxx.php" method="" target="" name="f">
<input type="image"/>
</form>
其他属性
1.size
size可以设置输⼊框的长度⼤⼩
<form action="">
<!-- size属性设置输⼊框的长度 -->
<input type="text" size="0" value="默认值0"/>
<input type="text" size="5" value="长度5"/>
<input type="text" size="10" value="长度10"/>
</form>
2.maxlength
maxlength允许输⼊框中输⼊字符的最⼤长度
<form action="">
<!-- maxlength属性设置输⼊框允许输⼊字符最⼤长度 -->
<input type="text" value="" maxlength="10"/>最⼤长度为10
</form>
表⽰该框中只能显⽰，不能添加修改

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。