HTML5学习笔记，标签为

• 1。功能：
  • 用于收集用户信息，并允许用户输入和选择相关信息
• 2。格式：

<form>
    所有的表单内容，都要写在form标签里面
</form>

• 3。注意：
  • 所有表单内容必须写在表单标签中
    表单标签中有两个重要的属性：action 和 method

input 标签

• 如果 td 是表单的核心标签，那么input就是表单Tag的核心标签。 input 标签有一个 type 属性。该属性有多种类型的值。不同的值决定了输入标签的功能和外观。

1。输入框

1.1 明文输入框的作用

• ：用户可以在输入框中输入内容
• 帐号：

1.2 密文输入box

• 功能：用户可以在输入框中输入内容
• 密码：

1.3 设置输入框的默认值

• 帐号：
• 密码：

1.4 指定输入中的最大字符长度字段

• 帐户：

1.5 代码

<form>
    <!--明文输入框-->
    <p>账号: <input type="text" /></p>
    <!--暗文输入框-->
    <p>密码: <input type="password" /></p>

    <!--p标签换行-->
    <p>账号: <input type="text" value="tqj" /></p>
    <p>密码: <input type="password" value="0929" /></p>


    <p>最大长度: <input type="text" maxlength="5"/></p>
</form>

Snip20170615_22.png

2.单选按钮（单选按钮）

• 功能：用户只能选择众多选项之一
• 单选按钮本质上并不相互排斥。如果要互相排除，必须有同名属性

3。 Multi-checkbox（复选框）

• 功能：用户只能从多个选项中选择多个选项
• 复选框最好具有相同的名称（虽然它们不必互相排斥，但也应该具有相同的名称） ）

4。 Label标签

• 功能：label标签对用户没有特殊作用。不过，它提高了鼠标用户的可用性
• 注意：
  form 元素必须有 id，然后 label 标签有 for 属性。如果for属性与id相同，则表示绑定了所有表单元素
  都可以通过标签绑定

示例代码

<!--单选框-->
<!--checked属性,为默认值-->
<label for="sex">性别: </label>
<input type="radio" name="sex" checked /> <label for="sex">男</label>
<input type="radio" name="sex" /> <label for="sex">女</label>
<input type="radio" name="sex" /> <label for="sex">妖</label>
<p></p>

<!--多选框-->
<label for="课程">课程: </label>
<input type="checkbox" name="课程" checked /> <label for="课程">HTML5 </label>
<input type="checkbox" name="课程" checked /> <label for="课程">Swift </label>
<input type="checkbox" name="课程" /> <label for="课程">OC </label>
<input type="checkbox" name="课程" /> <label for="课程">CSS </label>

Snip20170615_1.png

5。按钮

5.1 常规按钮

• 功能：定义可点击按钮（大多数情况下用于通过 JavaScript 启动脚本）
  

5.2 图片按钮

• 功能：定义图片形式的提交按钮
  

5.3 恢复按钮

• 功能：定义恢复按钮。恢复按钮会删除表单中的所有数据
  
• 注意：
  此按钮不需要写入值，并自动显示“恢复”文本
  重置 仅影响表单表单中的表单项

5.4 提交按钮

• 功能：定义提交按钮。提交按钮将表单数据发送到action属性指定的页面
  
• 注：
  • 此按钮不需要写入值，会自动读取“提交”
  • 如果想通过提交的方式向服务器发送数据，提交的表单项必须设置name属性
  • 默认的明文传输（GET）并不安全，可以将method属性设置为POST非明文传输（学习Ajax再理解）

示例代码

<!--按钮-->
<!--普通按钮-->
<input type="button" value="点我有奖">
<!--图片按钮-->
<input type="image" >
<!--还原按钮-->
<input type="reset">
<!--提交按钮-->
<input type="submit">

Snip20170615_3.png

6.隐藏字段

• 功能：定义隐藏的输入字段
  
• 暂时不需要掌握，在Ajax中对数据的CRUD操作非常有用

7 。颜色选择器和日期选择器

• 颜色选择器：
• 日期颜色选择器：
• HTML5 添加了许多输入类型，例如颜色和日期，但它们不兼容。稍后我会重点讲解浏览器兼容性

• 自己测试一下 Mac 电脑上的 Safari 浏览器不兼容，所以只能使用 Google Chrome

<!--取色器-->
<label>颜色: </label> <input type="color">
<!--换行-->
<p></p>

<!--日期选色器-->
<label>时间: </label> <input type="date">

Snip20170615_5.png

8。数据列表

• 功能：将选项链接到输入框
• 格式：

  <option>待选项内容</option>
</datalist>

• 如何给出 将输入框链接到选择列表
  • 创建输入框
  • 创建数据列表列表
  • 在datalist列表标签中添加id
  • 在输入框中添加list属性，并赋值datalist id对应的值。只需给出列表属性

<!--数据列表-->
请选择车型: <input type="text" list="cars">
<datalist id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>别克</option>
    <option>奔腾</option>
    <option>奔跑</option>
</datalist>

Snip20170615_6.png

• 当输入某个字符时，它会自动根据数据列表列表进行查询，并显示对应的列表，如图：

Snip20170615_7.png

三。多行文本框（文本区域）

• 功能：textarea 标签用于定义表单的多行文本输入控件
  • cols 属性表示列，指定文本区域中的可见宽度
  • rows 属性表示行“Row”，指定文本区域内的可见高度
• 格式：
  默认
• 注意：
  • 可以通过列和行指定输入框的宽度和高度
  • 输入框默认可以手动拉伸

<!--禁止手动拉伸-->
<style type="text/css">
  textarea{
      resize: none;
  }
</style>

IV。下拉

• 功能：选择标签，如ul、ol、dl等，是组标签。用于创建候选列表，形式为
  • 就像radio和checkbox一样，Select也可以设置一个默认值，由选中的属性来设置（默认值是第一个Options）
• 添加分组drop -down list

示例代码

<!--给下拉表添加分组-->
<select>
    <optgroup label="杭州市">
        <option>江干区</option>
        <option>西湖区</option>
        <option>滨江区</option>
        <option>下城区</option>
    </optgroup>
    <optgroup label="烟台市">
        <option>莱山区</option>
        <option>芝罘区</option>
    </optgroup>
    <option selected>北京市</option>
</select>

作者：ShmilyCoder
链接：https://www.jianshu.com/p/8bb6f53e1de5
来源：简书
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。