表单的概念

表单

表单主要用来收集用户填写或选择的信息，并提交到服务器当中去。
html表单是网页上可以提供用户输入和选择的一些控件（表单元素）组成的。
现在网站一般都是：轻注册重验证。
表单元素：

• 元素：HTML中，是从开始标签到结束标签中的所有代码
• 表单元素指的是不同类型的控件。
  表单的格式为：

<from>
	<h1></h1>、<p></p>、<div></div>、<span></span>
</from>

from标签

• 用于为用户创建一个表单
• action：表单提交的地址

示范：
<form action="www.baidu.con"></form>
/将数据提交到百度。

input标签：

• 单标签
• 用于收集用户的信息，是最要的表单元素
• type：根据属性值不同，展示不同的控件。比如：输入框，密码框，复选框，提交按钮框。

1.1输入框

• type:text：允许用户输入文本。

<input type="text">

常用属性有：

• value：未输入前的默认文本

<input type="text" value="默认文本">

• placeholder：未输入之前的提示内容

<input type="text" placeholder="123">

• maxlength：文本区域最多可以输入的字符数

<input type="text" maxlength="5">

• minlength：文本区域最少应该输入多少字符数。

<input type="text" minlength="5">

• autofocus：页面加载后自动获取焦点。

<input type="text" autofocus>

1.2密码框

type：password ：会对输入内容进行遮盖

输入框<input type="password" autofocus>

1.3单选框

type：radio
name：名称 可以分组
如果不设置name属性，浏览器不知道哪些单元框是一组，不能做到单选的效果。给同一组单选按钮，添加一个相同的name属性值，才可以做到单选。

<input type="radio" name="aihao">篮球
<input type="radio" name="aihao">羽毛球

1.4多选框

type：checkbox
name：名称可以分组

<input type="checkbox" name="aihao">篮球
<input type="checkbox" name="aihao">羽毛球

1.5按钮

按钮可以分为三种：普通，提交，重置。

• 提交：type:submit 提交表单。

<input type="submit" >

• 重置：type reset 重置表单，回归到初始状态。

<input type="reset" >

• 普通： type button 配合js完成一些操作

<input type="button" value="普通按钮">

注：普通按钮没有默认的名称显示，需要value"名称"进行添加。

1.6文件上传

type：file

 <input type="file">

1.7隐藏域

type：hidden

作用：提交一下不需要用户看到的数据到服务器。

隐藏域对用户是不可见。

应用场景：修改数据时。

<input type="hidden">

通用属性

通用属性

name 名称

<input type="text" name="hobby">

value 定义表单元素的值，提交时会送往服务器。

<input type="text" value="www.baidu.com">

disabled 禁用

输入框<input type="text" disabled>

readonly 只读

<input type="text" readonly>

required 必填项（此项为必须填写）

输入框<input type="text" required >

label标签

label元素不会向用户呈现特殊效果。它是为鼠标用户改进可用性。如果在label元素内点击文本，就会触发此控件。

 <label for="accout">账户名</label><input id="accout" type="text" required >

注：label中的for属性填写名称要与input里面id的名称相同才可以实现。

下拉菜单

嵌套关系：select>option

option是一个文本级标签，只能放置文字。

select:定义下拉列表

<select>
        <option>飞机</option>
        <option>轮船</option>
        <option>火车</option>
    </select>

select常用属性

• size 显示的下拉选项的个数

<select size="2">
        <option>---请选择---</option>
        <optgroup label="一线城市">
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </optgroup>
        <optgroup label="二线城市">
            <option>武汉</option>
            <option>重庆</option>

• multiple 多选 按住ctrl键。

<select size="2" multiple>
        <option>---请选择---</option>
        <optgroup label="一线城市">
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </optgroup>
        <optgroup label="二线城市">
            <option>武汉</option>
            <option>重庆</option>

• option：定义下拉选项。

• option常用属性

selected 默认选中。

<select>
        <option>---请选择---</option>
        <optgroup label="一线城市">
            <option selected>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </optgroup>
        <optgroup label="二线城市">
            <option>武汉</option>
            <option>重庆</option>