HTML学习笔记6 表单标签

写在前面

特此声明，本系列学习笔记内容来源于网络，为加深记忆所做的笔记，内容相当于转载自他处，转载来源为 极客江南的博客，以及w3school对应的表单教程

form标签1

• 表单用于搜集不同类型的用户输入
• 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
• 格式：

<form>
 .
form elements
 .
</form>

常见表单元素

input标签

• form中最重要的表达标签
• 格式：

<form>
    <!--<input> 元素有很多形态，由不同的 type 属性所决定-->

    <input type="text">

    <!--常见属性取值有 text，password，radio，（单选按钮，选择多个选择项之一），checkbox（复选框），button/submit，rest（重置）-->
</form>

• 注1：默认情况下多个radio（单选框）的单选不会互斥，若要实现多个radio的单选，需要将这多个单选radio设置相同的name属性
• 注二：可以用input的type属性取值为image来实现图片，然后设置配合js实现按钮功能

action属性

规定向何处提交表单的地址（URL）（提交页面）。

label标签

• 实现文字和input标签的绑定，作用是通过点击文字将光标定位到与之绑定的input标签

• 格式：

<form>
    <label for="account">账号:</label>
    <input type="text" id="account"></input>
</form>

datalist标签（了解即可,很多浏览器不支持）

• 待选列表，用于给输入框提供待选项，比如百度搜索框开始输入文字后会有自动提示。但实际上百度使用的不是datalist，而是与ajax有关的设计
• datalist格式：

<datalist id="mylist">
    <option>香蕉</option>
    <option>苹果</option>
    <option>梨子</option>
</datalist>

• datalist使用：
• • 先有一个输入框
• • 设计datalist标签，并添加id属性
• • 给输入框添加list属性，将datalist的id赋值给list属性

<form>
    输入：<input type="text">st="mylist">
    <datalist id="mylist">
    <option>香蕉</option>
    <option>苹果</option>
    <option>梨子</option>
</datalist>
</form>

form标签2

select标签

• 用于定义下拉列表
• 格式：

<select>
    <option>数据1</option>
    <option>数据2</option>
</select>

• 注：框内只能选择内容，不能输入内容，可以在option中设置selected属性来指定默认值
• 注二：可用optiongroup标签包裹option的标签给选项分组。
• 分组格式：

<select>
    <optgroup label="分组名1">
        <option>数据1</option>
        <option>数据2</option>

    <optgroup label="分组名2">
          <option>数据12</option>
          <option>数据22</option>
    </optgroup>

    <optgroup label="分组名2">
         <option>数据1122</option>
         <option>数据2211</option>
    </optgroup>

</select>

textarea标签

• 定义一个多行文本输入区
• 有默认宽高，但可通过rows和cols改变行列，另外，不论怎么设置rows和cols，输入框都可以用鼠标拖动改变大小，不过，可用css固定。
• 格式：

<textarea>
</textarea>

form新增标签

email标签

• 可以自动校验输入的内容是否是合格邮箱地址

url标签

• 可以自动校验输入的内容是否是合格url地址

number标签

• 输入框只能输入数字

date标签

• 通过日历选择时间

color标签

• 可以通过取色板选择颜色