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标签

可以通过取色板选择颜色