阅读模式:

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

阅读量:10  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:语法<input type="" name="" id="" value="" placeholder=""/>......

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")

<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="普通按钮"/>
    <!-- 也可以通过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>

 

3.readonly

表示该框中只能显示,不能添加修改

<form action="">
    <!-- readonly属性设置输入框内容不可修改 -->
    <input type="text" value="只能显示内容,不允许修改" readonly/>
    <!-- or -->
    <input type="text" value="只能显示内容,不允许修改" readonly="readonly"/>
</form>

 

4.placeholder  

输入框提示信息

<form action="">
    <!-- placeholder指定输入框提示信息 -->
    账号:<input type="text" placeholder="请输入账号"/><br>
    密码:<input type="password" placeholder="请输入密码"/>
<script type="text/javascript">

 

5.autocomplete

是否保存用户输入值,值为on(默认)或off,on是保存,off是不保存

<!-- autocomplete:是否保存输入值,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">
    <!-- autofocus:页面加载完毕,输入框自动获取焦点 -->
    <input type="text" autofocus="autofocus"/>自动获取焦点
    <!-- 以下写法不能正确获取焦点 -->
    <input type="text" autofocus>
</form>

注意:autofocus不能向readonly属性一样简写,必须写全:autofocus="autofocus"

 

7.required

 填写这个属性使文本框为必填内容,否则无法提交

<form action="demo-form.php" autocomplete="on">
    <!-- required:设置输入框必填内容-->
    <input type="text" required="required"/>此输入框必填
    <!-- 以下写法错误 -->
    <input type="text" required">
    <input type="submit">
</form>

 

注意:设置了 required="required" 属性后,当前输入框必须输入内容,否则会给出提示警告,并且不能简写 required。

 

8.pattern

设置正则验证,使输入内容必须符合正则要求才能提交

<form action="demo-form.php">
    <!-- pattern:正则验证,使输入内容必须符合正则要求才能提交-->
    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">
    <!-- value:设置输入框默认值 -->
    <input type="text" value="输入框中默认值"/>
    <input type="text" value="123"/>
    <input type="text" value="壹贰叁"/>
    <input type="submit">
</form>

 文本框为必填内容,否则无法提交

 

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: