区块、表单元素基础详解

1 区块

1.1 div标签和span标签

• div：把标签中的内容作为⼀个块儿来对待(division)。必须单独占据⼀行。div标签是⼀个容器级标签，里面什么都能放，甚至可以放div自己

• span：是⼀个文本级的标签。 就是说，span里面只能放置文字、图片、表单元素。span里面不能放p、h、ul、dl、ol、div等标签

<!-- div标签 -->
<div>
    <div>我是顶部导航栏</div>
    <div>我是菜单栏</div>
</div>
<!-- span标签 -->
<span>我是span</span>

2 表单元素

1.1 应用场景

银行开户的申请单

个人信息表

注册登录

1.2 表单的作用

搜集不同类型的用户输入信息

表单是由网页上可以提供用户输入和选择的⼀些控件（表单元素）组成的

1.3 表单元素的概念

• 元素：在HTML中，是从开始标签（start tag）到结束标签（end tag）的所有内容

• 表单元素指的是不同类型的 input 元素（文本框）、复选框、单选按钮、提交按钮等等

1.4 表单格式

<form>
    <input type="text" value="我是文本框">
    <textarea>我是textarea</textarea>
    <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select>
</form>

1.5 form标签

作用：form 标签⽤于为用户输入创建 HTML 表单

action：表单提交的地址。搜集完了要提交

method：提交的方式

• get URL参数可见，不安全

• post URL参数不可见，安全

• enctype 当有文件上传的时候，必须填写这个属性

<form method="get">
    ...
</form>

1.6 input标签

input元素是最重要的表单元素，⼀般用于搜集用户信息

type：根据属性值不同，input标签展示为不同的控件，如输入框，密码框，复选框等

1.6.1 文本框

允许用户输入文本。

属性：

• type="text"

• value 没输⼊之前的默认文本

• maxlength|minlength 文本区域最大|最小字符

• placeholder 未输⼊之前的提示文本

• autofocus 页面加载后文本区域自动获取焦点

// ⽂本框标签案例
<input type="text" value="" />

1.6.2 密码框

属性：

type="password"

// 案例
<input type="password" />

1.6.3 单选框

属性：

• type="radio"

• name：名称分组作用。 如果不设置name属性，不知道哪些单选框是⼀组，不能做到单选的效果。给同⼀组的单选框，都添加⼀个 name属性，属性值必须⼀致。 name属性还有⼀个用处。 当表单提交的时候，name属性值会跟着标签内用户输入的值⼀起提交

• checked 选中属性值为checked，默认选中

• disabled 禁止使用

// 案例
<input type="radio" name="user_sex" value="男" />
<input type="radio" name="user_sex" value="女" />

1.6.4 多选框

属性：

• type="checkbox"

• name：名称分组作用。

// 案例
<input type="checkbox" name="hobby" value="乒乓球">
<input type="checkbox" name="hobby" value="篮球">
<input type="checkbox" name="hobby" value="羽毛球">
<input type="checkbox" name="hobby" value="网球">

1.6.5 按钮

按钮有三种：普通、提交、重置

• 普通 type="button" 配合js完成⼀些操作

• 重置 type="reset" 重置表单数据 有默认的按钮标题。

• 提交 type="submit" 提交表单

• value：按钮⽂本

<input type="button" value="按钮" />

1.6.6 文件上传

type="file"

<input type="file" />

1.6.7 隐藏域

作用：用于悄悄地收集和发送⼀些数据到服务器

隐藏域在网页中对用户是不可见

应用场景：修改数据时，用户ID隐藏

type="hidden"

<input type="hidden" />

1.6.8 图片提交按钮

<input type="image" src="http://jsrun.net/res/css/img/logo@2x.png" alt="submit" />

1.6.9 label标签

label 标签为 input 元素定义标注（标记）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性

如果您在 label 元素内点击文本，就会触发此控件

就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

label标签的 for 属性应当与相关元素的 id 属性相同

绑定步骤

• 将文字用label标签包裹起来

• 给输入框添加⼀个id属性

• 在label标签中设置for属性值等于输入框的id值

<input type="checkbox" id="name">
<label for="name">选中</label>

1.7 文本域

textarea

可以输⼊多行文本

rows

属性值是数字，表示有多少行

cols

属性值是数字，表示宽度

默认情况下，输入框是可以手动拉伸的

<textarea rows="12" cols="60">这是个多⾏⽂本</textarea>

1.8 下拉菜单

select

定下拉列表

属性：

• size 显示的个数

• multipe 多重选择

option

定义列表中的选项

属性：

• value 表单提交时，会提交 option 中的 value 属性

select 和 option 是⼀组标签，必须同时出现，有嵌套关系

select>option option 标签不是容器级的标签，只能放置文本

可以给 option 标签添加 selected 属性来设置默认选中

<select size="1" multiple="multiple">
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

1.9 fieldset标签

• fieldset 标签将表单内容的⼀部分打包，生成⼀组相关表单的字段

• 当⼀组表单元素放到 fieldset 标签内时，浏览器会以线框来显示它们

• legend 标签为 fieldset 元素定义标题

<form>
    <fieldset style="width:300px">
        <legend>注册</legend>
        用户名:<input type="text"><br>
        密 码:<input type="password">
    </fieldset>
</form>

1.10 通用属性

• name 提交到后端的属性名

• value 定义表单控件的值，提交时会送往服务器

• required 必填项

• disabled 禁用

• readonly 只读