文章目录
一、表单的用途
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> | 可以定义预格式化的文本,常用来表示计算机的源代码。 |