这是我参与[第四届青训营]笔记创作活动的第一天

一.简单的了解input

1.input定义和使用

input 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
input元素在 form元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。
目前所有的浏览器都支持input标签的使用，所以我们不用考虑浏览器的兼容性

2.浅浅使用input使用

<form action="www.baidu.com">
        用户名:<input type="text" name="name"><br> 
        密码:<input type="password" name="password"><br>
        <input type="button" value="提交">
 </form>

在上面的代码就是我们常使用的input标签的方式。上面的代码运行后会当我们输入的用户名和密码点击提交按钮后会将输入的信息提交到from标签中action里面的地址中去。

二.深入了解input标签属性

1.input的属性

1. type属性
  text 为文本输入框
  <input type="text" size="20" maxlength="20">
  button 普通的按钮，可以通过js来绑定事件
  <input type="button" value="按钮">
  checkbox 复选择框可以选择一个或多个内容
  <input type="checkbox" value="苹果" name="sg">苹果 <input type="checkbox" value="梨" name="sg"> 梨
  color 颜色选择器
  <input type="color">
  date 日期控件
  <input type="date">
  datetime-local日期加时间控件
  <input type="datetime-local">
  email 改控件用来输入"email"地址，若用户输入非email格式，那么再支持HTML5的浏览器中提交改表单时，会提示为不是合法格式。
  <input type="email">
  file 文件域可以选择的文件上传到服务器
  <input type="file">
  hidden 隐藏域
  <input type="hidden">
  image 将图片转为图片形式按钮
  <input type="image">
  month 月份选择框
  <input type="month">
  number 数字选择框
  <input type="number">
  password 密码框
  <input type="password">
  radio 单选框只能选择一个
  <input type="radio" value="夏天" name="jj">夏天 <input type="radio" value="冬天" name="jj">冬天
  range 输入数值
  <input type="range">
  reset重置按钮
  <input type="reset" value="重置" name="reset">
  search 搜索
  <input type="search">
  submit 提交按钮会将from表单中的input输入的内容提交到你想提交的位置
  <input type="submit" value="提交">
  tel 输入电话号码
  <input type="tel">
  time 输入时间
  <input type="time">
  url输入URL
  <input type="url">
  week年周输入框
  <input type="week">
  上述所有input标签中的结果

QQ截图20220724113212.png

2.accept 规定通过文件上传来提交文件的类型（该属性只能去针对type类型为file）
3.alt 当图像没有显示的时候会代替图片进行显示（该属性只会针对type类型为image）
4.checked 规定在页面选中的加载的时候就会选定（该元素只会针对type为checkBox和radio）
5.disabled 该属性会禁止使用input元素（输入框不会别点击成为灰色，特别注意该属性不能和type为hidden一起使用）
6.autocomplete 该属性是可以在元素或者表单上面开启(autocomplete="on")或者关闭(autocomplete="off")浏览器的自动完成功能。简单的来说就是将你以前输入过的内容是否在重新的填入
7.autofocus 在规定页面加载时候自动获得焦点
8.form 属性规定元素所属的一个或多个表单。
9.formaction 重写表单的action属性
10.formenctype 重写表单的formenctype属性
11.formmethod 重写表单的method属性
12.formnovalidate 重写表单的formnovalidate 属性
13.formtarget 重写表单的formtarget 属性
14.height 用于设置image类型input标签的高度（该属性只能用于type类型为image）
15.max 该属性规定输入的最大值
16.min 该属性是规定输入的最小值
17.maxlength 该属性限制输入的最长字符
18.list 大多数输入类型包含一个属性list，它和一个新元素datalist结合使用，这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist元素自身不会在页面显示，而是为其他元素的list属性提供数据
19.name 属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据。
20.pattern 属性规定用于验证 input>元素的值的正则表达式。
21.placeholder 属性规定可描述输入 input 字段预期值的简短的提示信息。就是我们输入信息的时候还未输入前输入框中的提示信息，但是当输入成功后就会消失
22.readonly 属性规定输入字段是只读的。
23.required 该属性规定必须在提交前进行填写，不填写在提交的时候会报错
24.size 规定可见的字符数
25.src src属性作为提交按钮显示的图像的URL
26.step 该属性规定了字符之间的间隔
27.value 给input元素设定值，对于不同的输入类型value的用法也是不同的（type的值为button，reset，submit时，用于定义按钮上的显示文本 type的值为text password hidden时，用于定义初始值 type为checkBox，radio，image时，用于定义与输入相关的值）
28.width height 用于设置image类型input标签的宽度（该属性只能用于type类型为image）

以上就是我对input标签的总结，如有错误请留言指正

input标签的全面覆盖学习|青训营笔记