HTML 表单标签

Form Element

form

form: 用于为用户输入创建 HTML 表单。用于向服务器传输数据。

Attributes

  First name: 

  Last name: 

  

fieldset

fieldset: 将表单内的相关元素分组

• 标签会在相关表单元素周围绘制边框。
• 提示：
  标签为
  元素定义标题。
• form 属性规定 fieldset 所属的一个或多个表单，属性的值必须是所属表单的 id。

Attributes

  你喜欢什么口味的冰激凌？

  


  
Personalia:
  Name: 

label

label: 规定 label 与哪个表单元素绑定。

Social Security Number:



Date of Birth: 

input

input: 用于搜集用户信息。

• 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

Attributes

textarea

textarea: 定义一个多行的文本输入控件。

• 特有属性：[rows | cols | wrap];wrap 有两个值：hard & soft

option

• 特有属性： [ selected ]

select

select: 创建下拉列表。

• 特有属性：[multipe | size ]

select, input[type="text"] {
  width: 200px;
  padding: 10px;
}

  
  
    HTML
    CSS
    JS
  
  
    JAVA
    PHP
  

• select 相关的 js：
  • new Option(text,value)

    document.querySelector("select").options.add(new Option("txt", "val"));
    

  • options.length

    document.querySelector("select").options.length;
    

  • 修改选中值

    document.querySelector("select").options[3].selected = true;
    

  • 查询选中的索引

    document.querySelector("select").selectedIndex;
    

  • 查询选中值

    document.querySelector("select").value;
    document.querySelectorAll("option")[
      document.querySelector("select").selectedIndex
    ].value;
    

• select 相关的 css：
  select 框的样式可以修改，option 的样式不好改

datalist

datalist: 规定了 元素可能的选项列表。

• list 属性引用 元素，其中包含 元素的预定义选项。

• datalist 相关的 js：
  • new Option(text,value)

    let newEl = document.createElement("option");
    newEl.setAttribute("value", "test");
    newEl.innerHTML = "test";
    document.querySelector("datalist").appendChild(newEl);
    

  • options.length

    document.querySelector("datalist").options.length;
    

  • 修改选中值

    document.querySelector("[type='text']").value =
      document.querySelector("datalist").options[1].value;
    

  • 查询选中值

    document.querySelector("[type='text']").value;
    

时间

特有属性： max ,min ,step ,value 可以设置默认值

• 修改日期控件的样式
  ::-webkit-datetime-edit – 控制编辑区域的
  ::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的
  ::-webkit-datetime-edit-text – 这是控制年月日之间的斜线或短横线的
  ::-webkit-datetime-edit-month-field – 控制月份
  ::-webkit-datetime-edit-day-field – 控制具体日子
  ::-webkit-datetime-edit-year-field – 控制年文字, 如 2017 四个字母占据的那片地方
  ::-webkit-inner-spin-button – 这是控制上下小箭头的
  ::-webkit-calendar-picker-indicator – 这是控制下拉小箭头的
  ::-webkit-clear-button –这是控制清除按钮的

• 年份[1-99999],月份[1,12],周[1,53],日期[1,31],小时[0,23],分钟[0,59]
• 2 月的日期不会只能调整，上限依旧是 31
• value 属性可以返回选择的日期，格式是字符串
• time 设置 step="非 60 倍数"的可以具体到秒输入
• max，min 的设置不一定有效
• [type='datetime']不一定支持

按钮

• [type='image']一般 src 和 alt 需要结合使用，如果图片不显示则显示 alt 的内容。
• [type='image']本质是 submit 按钮

文本

• password 的输入会被掩码，更改[type='password']的 type 为[type="text"]可以明码显示
• 在触屏端点击[type='tel']的输入框时，跳出的虚拟键盘为电话键盘（1-9、*、#）。

选择按钮

特有属性： name, checked ,value;根据 name 值给选择按钮分组，根据 value 值返回选择内容

文件

特有属性： accept, capture ,files，multiple;

• accept：MIME 类型，允许哪种格式的文件；例如"accept="image/*"
• capture: 如果 accept (en-US) 属性指出了 input 是图片或者视频类型，则它指定了使用哪个摄像头去这些数据。值 user 表示应该使用前置摄像头和/或麦克风。值 environment 表示应该使用后置摄像头和/或麦克风

颜色

• value 返回的值是十六进制颜色码

数值

特有属性： max, min ,step;

• 修改[type='range']控件的样式：
  ::-webkit-slider-thumb,::-moz-range-thumb：滑块(thumb)
  ::-webkit-slider-runnable-track,::-moz-range-track：滑动轨道(track)
  ::-moz-range-progress：填充进度条
  • IE9
    ::-ms-track 滑动轨道，::-ms-thumb：滑块，::-ms-fill-lower：已填充部分，::-ms-fill-upper：未填充部分
    详情可参考：https://blog.csdn.net/weixin_38930535/article/details/79542130

搜索

• 修改[type='search']控件的样式：
  ::-webkit-input-placeholder：placeholder 占位符
  ::-webkit-search-cancel-button：默认的取消按钮
  苹果 6 ios10 的搜索框是椭圆形，可以用下面语句去除：

  input[type="search"] {
    -webkit-appearance: none; //去除ios下input 椭圆形
  }
  

• [type="search"]必须在含有 action 属性的 form 里面，虚拟键盘的 Done 键才会变成 Search 键

隐藏

• 收集或发送信息