2022年form表单中input控件最详细总结

语法<input type="" name="" id="" value="" placeholder=""/>属性

type：判断输入信息的类别，此属性值必须写，不写默认是text文本信息（text、password、radio、checkbox...）
name：标明该input名称，可用于设置radio单选操作
size：输入框的长度大小
maxlength：输入框中允许输入字符的最大数
readonly ：表示该框中只能显示，不能添加修改
autocomplete ：是否保存用户输入值，值为on(默认)或off
autofocus ：获取文本框焦点
required ：设置文本框为必填内容
pattern ：设置正则校验
value：给input输入框设置默认值
placeholder：文本提示信息，用来标注该input是干啥的

type属性1.文本域（type="text"）【2022年form表单中input控件最详细总结】<form action="" method="" target=""><input type="text"/></form>

文章插图
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

2.密码字段（type="password"）<form action="" method="" target=""><input type="password"/></form>

文章插图
注意:密码字段字符不会明文显示，而是以星号或圆点替代。

3.单选按钮（type="radio"）<form action="" method="" target=""><input type="radio" name="sex" value="https://tazarkount.com/read/male">男<input type="radio" name="sex" value="https://tazarkount.com/read/female">女</form>

文章插图
注意:需要设置radio并将name属性的值写成一致实现单选

4.复选框（type="checkbox"）<form action="" method="" target=""><input type="checkbox"/>路飞<input type="checkbox" checked/>索隆<input type="checkbox"/>娜美</form>

文章插图
注意:设置checked属性表示默认选中

5.时分（type="time"）<form action="" method="" target=""><input type="time"/></form>

文章插图

6.年周（type="week"）<form action="" method="" target=""><input type="week"/></form>

文章插图
7.年月（type="month"）<form action="" method="" target=""><input type="month"/></form>

文章插图
8.年月日（type="date"）<form action="" method="" target=""><input type="date" value="https://tazarkount.com/read/2022-01-10"><input type="date"/></form>

文章插图
注意：可以通过value值来设置默认时间
9.年月日时分（type="datetime-local"）<form action="" method="" target=""><input type="datetime-local"/></form>

文章插图
10.文件上传（type="file"）<form action="" method="" target=""><input type="file"/></form>

文章插图
注意：设置multiple -- 可以选择多个文件，然后提示用户选中了几个文件
11.电子邮箱（type="email"）<form action="" method="" target=""><input type="email"/><input type="submit" value="https://tazarkount.com/read/提交"></form>

文章插图
注意：输入不是邮箱时，无法提交，并自动给予提示
12.选择颜色（type="color"）<form action="" method="" target=""><input type="color"/><input type="submit" value="https://tazarkount.com/read/提交"></form>

文章插图
13.网址输入框（type="url"）<form action="" method="" target=""><input type="url"/><input type="submit" value="https://tazarkount.com/read/提交"></form>

文章插图
注意：输入不是网址时，无法提交，并自动给予提示
14.可清除输入框（type="search"）<form action="" method="" target=""><input type="search"/><input type="submit" value="https://tazarkount.com/read/提交"></form>

文章插图
注意：设置type类型为search，仍是文本框，只是右边多了一个x，点击可以直接清空文本框内容
15.数字输入框（type="number"）<form action="" method="" target=""><input type="number"/></form>

文章插图
注意：设置type类型为number，文本框只能输入数字，其他字符一律不能输入，并且右侧可以对数字进行增减

16.隐藏文本框（type="hidden"）<form action="" method="" target="" name="f"><input type="hidden" value="https://tazarkount.com/read/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"><input type="range" step="1" min="0" max="10"value="https://tazarkount.com/read/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"><input type="button" value="https://tazarkount.com/read/普通按钮"/><button type="button">按钮</button></form>

文章插图
19.重置按钮（type="reset"）<form action="" method="" target="" name="f"><input type="text"/><input type="reset" value="https://tazarkount.com/read/重置"/><button type="reset">重置</button></form>

文章插图
注意：输入内容后，点击重置按钮会清空form表单，所有内容都将被清空
20.提交按钮（type="submit"）<form action="" method="" target="" name="f"><input type="text"/><input type="submit" value="https://tazarkount.com/read/提交"/><button type="submit">提交</button></form>

文章插图
注意：输入内容后，点击提交按钮会提交到form表单指定的地址中
21.图片（type="image"）<form action="xxx.php" method="" target="" name="f"><input type="image"/></form> 其他属性1.sizesize可以设置输入框的长度大小
<form action=""><input type="text" size="0" value="https://tazarkount.com/read/默认值0"/><input type="text" size="5" value="https://tazarkount.com/read/长度5"/><input type="text" size="10" value="https://tazarkount.com/read/长度10"/></form>

文章插图
2.maxlengthmaxlength允许输入框中输入字符的最大长度
<form action=""><input type="text" value="" maxlength="10"/>最大长度为10</form>

文章插图
3.readonly表示该框中只能显示，不能添加修改
<form action=""><input type="text" value="https://tazarkount.com/read/只能显示内容，不允许修改" readonly/><input type="text" value="https://tazarkount.com/read/只能显示内容，不允许修改" readonly="readonly"/></form>

文章插图
4.placeholder 输入框提示信息
<form action="">账号：<input type="text" placeholder="请输入账号"/><br>密码：<input type="password" placeholder="请输入密码"/><script type="text/javascript">

文章插图
5.autocomplete是否保存用户输入值，值为on(默认)或off，on是保存，off是不保存
<form action="demo-form.php" autocomplete="on">First name:<input type="text" name="fname">Last name: <input type="text" name="lname" autocomplete="off"><input type="submit"></form>

文章插图

填写并提交表单，然后重新刷新页面获取焦点就可自动填充内容，这里关闭了第二个输入框，所以不会保存用户之前输入的值
6.autofocus获取文本框焦点，当文本框有这个属性时，打开网页自动获取这个文本框的焦点

<form action="demo-form.php" autocomplete="on"><input type="text" autofocus="autofocus"/>自动获取焦点<input type="text" autofocus></form>

文章插图
注意：autofocus不能向readonly属性一样简写，必须写全：autofocus="autofocus"
7.required 填写这个属性使文本框为必填内容，否则无法提交
<form action="demo-form.php" autocomplete="on"><input type="text" required="required"/>此输入框必填<input type="text" required"><input type="submit"></form>

文章插图

注意：设置了 required="required" 属性后，当前输入框必须输入内容，否则会给出提示警告，并且不能简写 required 。
8.pattern设置正则验证，使输入内容必须符合正则要求才能提交
<form action="demo-form.php">Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="三个英文字母"><input type="submit"></form>输入不正确：

文章插图
输入正确：

文章插图
9.value设置输入框默认值
<form action="demo-form.php" autocomplete="on"><input type="text" value="https://tazarkount.com/read/输入框中默认值"/><input type="text" value="https://tazarkount.com/read/123"/><input type="text" value="https://tazarkount.com/read/壹贰叁"/><input type="submit"></form>

文章插图
文本框为必填内容，否则无法提交

本文来自博客园，作者：不知名前端李小白，转载请注明原文链接：https://www.cnblogs.com/libo-web/p/15784654.html