文章目录
一、表单的用途
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
一个表单有三个基本组成部分：
- 表单标签：这包含了处理表单数据所用的URL以及数据提交到服务器的方式。
- 表单域(表单控件)：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框 和文件上传框等。
- 表单按钮：包括提交按钮、复位(重置)按钮和一般按钮；用于将数据传送到服务器上或者取消输 入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
1、表单的经典应用
2、表单的基本语法
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框 （radio-buttons）、复选框（checkbox） 等等。
我们可以使用 <form>标签来创建表单:
``·<form action=“表单提交地址” method="提交方法> 文本框、按钮等表单元素 </form>·
form表单属性：
- action 用于指定提交表单数据的请求URL。
- method 表单数据发送至服务器的方法,常用的有两种 get(默认)/post。
get和post的区别：
- get提交：用户输入的信息，显示在地址栏中，不安全，请求内容长度有限制，请求速度快。
- post提交：用户输入的信息，不会显示在地址栏，安全,请求内容长度无限制(重要数据)，请求速度 慢。
注：实际开发中，页面布局 一般和table使用。
3、表单控件元素
3.1、表单输入控件
<input>定义输入控件
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本 控件、单选按钮、按钮等等
| 控件名称 | type属性值 | 描述 |
|---|---|---|
| 文本框 | text(默认 值) | 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。 |
| 密码框 | password | 定义密码字段 |
| 单选按钮 | radio | 定义单选按钮。(性别等) |
| 复选框 | checkbox | 定义复选框。(爱好等) |
| 提交按钮 | submit | 定义提交按钮。 |
| 重置按钮 | reset | 定义重置按钮（重置所有的表单值为默认值）。 |
| 图片提交按钮 | image | 定义图像作为提交按钮。 |
| 普通按钮 | button | 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本） |
| 隐藏文本框 | hidden | 定义隐藏输入字段。前后台交互非常有用 |
| 文件上传框 | file | 定义文件选择字段和 “浏览…” 按钮，供文件上传。可以通过accept属性 规范选取文件的类型,比如图片/视频,如果不设置则什么类型都可以。 accept属性的值: image/* 接受所有的图像文件。 image/png 表示只接 受图片文件的png文件 audio/* 接受所有的声音文件。 video/* 接受所 有的视频文件。 multiple属性可以用来设置一次允许选择多个文件 multiple=“multiple” |
3.2、其他表单控件
1、 <textarea>：定义文本域 (一个多行的输入控件)
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。 可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
缩放设置：
- 禁止缩放：resize: none;
- 水平缩放：resize: horizontal;
- 垂直缩放：resize: vertical;
- 水平垂直缩放：resize: both;
2.<label>:定义了<input>元素的标签，一般为输入标签
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点 击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表 单控件上。
1.方式一：
- for属性,让标签和指点的input元素建立关联,多数使用在单选或复选
- 给单选或复选后面的文字加入label标签,for属性值是input的id值
<label for="woman">女生：</label><input type="radio" name="sex" id="woman">
- 方式二：
- 将input元素包含在lable标签中
- 如果将input放置在label标签之间,那么for属性就可以不用
<label>男生:<input type="radio" name="sex" checked></label>
注：和单选、复选结合使用，提高用户体验。
3.3、表单元素的属性
| 属性 | 值 | 描述 |
|---|---|---|
| type | 上述值 | type 属性规定要显示的 元素的类型。 |
| value | text | 指定 元素 value 的值。 |
| size | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”) |
| size | number | size 属性规定以字符数计的 元素的可见宽度。 |
| readonly | readonly | readonly 属性规定输入字段是只读的。 |
| name | text | name 属性规定 元素的名称。 |
| maxlength | number | 属性规定 元素中允许的最大字符数。 |
| disabled | disabled | disabled 属性规定应该禁用的 元素。 |
| checked | checked | checked 属性规定在页面加载时应该被预先选定的 元素。 (只针对 type=“checkbox” 或者 type=“radio”) |
| accept | audio/* video/* image/* MIME_type | 规定通过文件上传来提交的文件的类型。 (只针对 type=“file”) |
| selected | selected | 下拉框的默认选中 |
表单经典 练习代码和图片效果:
效果1：
` <style>
table {
margin: auto;
}
tr td:nth-child(1) {
text-align: right;
}
</style>`
</head>
<body>
<form>
<table>
<caption>
<h2>注册手机号码邮箱</h2>
</caption>
<tr>
<td>手机号码</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>图片验证码</td>
<td><input type="text"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="免费获取验证码"></td>
</tr>
<tr>
<td>短信验证码</td>
<td><input type="text" name="password"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" required></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password"></td>
</tr>
<tr>
<td></td>
<td><label><input type="checkbox" checked><strong>同意服务条款</strong></label></td>
</tr>
<td></td>
<td><button>立即注册</button></td>
</tr>
</table>
</form>
</body>`
效果 2：
·<style>
table {
margin: auto;
}
td {
padding: 10px;
}
textarea {
padding: 10px;
resize: none;
}
</style>
</head>
<body>
<form action="#">
<table cellspacing="0" border="1">
<caption>
<h1>学生信息表</h1>
</caption>
<thead>
<tr class="up" borber="1px">
<div>
<td>学生姓名：<input type="text"> 设置密码：<input type="password"></td>
</div>
</tr>
<tr>
<td>性别: <br>
<label>男生:<input type="radio" name="sex" checked></label>
<label for="woman">女生：</label><input type="radio" name="sex" id="woman"><br>
<hr>
籍贯：<select name="" id="">
<option value="">BJ</option>
<option value="">HN</option>
<option value="">SD</option>
</select>
<hr>
自我介绍：<textarea name="" id="" cols="60" rows="10"></textarea>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>兴趣爱好：<br>
<label>足球<input type="checkbox"></label> <label>篮球<input type="checkbox" checked></label>
<label>动漫<input type="checkbox" checked></label>
<hr>
上传照片：<input type="file" accept="image/jpeg">
</td>
</tr>
</tbody>
</table>
</form>
</body>·
4、HTML列表标签
4.1无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
定义无序列表，使用 ul表示。
定义列表项，使用li表示<li></li> 一对li表示一个列表项。
给列表的小图标更换样式，使用属性type值：disc(默认值)、circle、square。
`
新人上路指南
<ul>
<li>如何激活会员名？</li>
<li>如何注册贵美会员？</li>
<li>注册时密码设置有什么要求？</li>
<li>贵美认证</li>
</ul>`
4.2、有序列表
有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于
<li>标签。
定义有序列表，使用ol表示。
给列表的小图标更换样式，使用属性type值：1、a、A、i、I。
有序列表的start属性：定义列表的开始序号。
标签。每个列表项始于 有序列表的value属性：定义单个列表项的序号。注意：设置之后,该列表项之后的值都随之变化。
<h3>注册步骤：</h3>
<ol>
<li>填写信息</li>
<li>收电子邮件</li>
<li>注册成功</li>
</ol>
4.3、自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 <dt> 开始。每个自定义列表项的定义以<dd>开 始。
<dt>标题</dt>
<dd>描述1</dd>
……
</dl>
注意事项 - 有用提示 提示: 列表项内部可以使用段落、换行符、图片#### 4.3、自定义列表
4.4、HTML文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到 HTML 中的文本格式化标 签，使文字以特殊的方式显示。
| 标签 | |
|---|---|
<b>或<strong> | 文本以粗体方式显示（推荐使用 strong 代替 b）。 |
<i>或<em> | 文字以斜体方式显示（推荐使用 em 代替 i）。 |
<S>或<del> | 文字以加删除线方式显示（推荐使用 del 代替 s）。 |
<u>或<ins> | 文字以加下划线方式显示（推荐使用 ins 代替 u）。 |
<small> | 文字以小号字体大小显示。 |
<sup> | 文字以上标方式显示 |
<sub> | 文字以下标方式显示。 |
<pre>或<code> | 可以定义预格式化的文本，常用来表示计算机的源代码。 |
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
