Web基础知识五之Html表单标记

最新推荐文章于 2024-06-13 16:05:32 发布

Andone_hsx

最新推荐文章于 2024-06-13 16:05:32 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web基础知识之Html 文章标签： html 标签表单

本文链接：https://blog.youkuaiyun.com/Andone_hsx/article/details/54000002

Web基础知识之Html 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了HTML中的表单元素及结构标记的应用方法，包括表单的提交方式、表单控件的使用技巧以及结构标记的具体作用，有助于开发者更好地理解和使用这些标记。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、列表
1、作用
按照一定的结构来显示数据
按照从上到下的顺序来显示数据

所有的列表都由两部分组成
1、列表类型（有序<ol>或无序<ul>）
2、列表项<li>
2、使用列表
1、有序列表
1、语法
列表类型：<ol></ol> -- Order List
列表项：<li></li> -- List Item
注：列表项是列表类型的子标签
2、属性
列表类型属性
1、type
取值：
1、1：默认值、数字
2、a：小写字符显示
3、A：大写字符显示
4、i：小写罗马字符
5、I：大写罗马字符
2、start

类型的起始编号

如下图展示：

<!doctype html>
<html>
	<head>
		<title>Insert your title</title>
		<meta charset="utf-8">
	</head>
	<body>
		<dl>
			<dt>水浒装</dt>
			<dd>
				描述的是105个男人和3个女人的惊心动魄的武侠故事!
			</dd>
			<dt>红楼梦</dt>
			<dd>
				描述的也是爱情故事!... ...
			</dd>
		</dl>
		<ul type="none">
			<li>
				西游记
				<ol>
					<li>孙悟空</li>
					<li>猪悟能</li>
					<li>沙悟净</li>
				</ol>
			</li>
			<li>三国演义</li>
			<li>
				水浒传
				<ul>
					<li>宋江</li>
					<li>李逵</li>
					<li>卢俊义</li>
				</ul>
			</li>
			<li>红楼梦</li>
		</ul>

		<ol type="A" start="356">
			<li>西游记</li>
			<li>三国演义</li>
			<li>水浒传</li>
			<li>红楼梦</li>
		</ol>
	</body>
</html>

2、无序列表
1、语法
列表类型：<ul></ul> -- Unorder List
列表项：<li></li>
2、属性
1、type
取值：
1、disc：默认值、实心圆
2、circle：空心圆
3、square：实心矩形
4、none：没有
3、定义列表
1、作用
定义列表往往用于要给出一类事物的定义的情形，
如名词解释等...
2、语法
<dl></dl>：定义一个定义列表
<dt></dt>：定义列表中的一个术语
<dd></dd>：定义列表中对术语的解释
3、使用场合
图文混排
2、结构标记<跟随Html5出现的，div做布局可读性差>
1、作用
专门搭建网页结构，用于提升标记的可读性
以后可以通过结构标记来取代做布局的div
2、详解
1、<header>元素
作用：定义网页文档的页眉（顶部信息）
语法：<header></header>
取代：<div id="header"><div>
2、<nav>元素
作用：定义页面中的导航链接部分
语法：<nav></nav>
取代：<div id="nav"></div>
3、<section>元素
作用：定义文档中的小节，在页面中可以表示主体内容部分
语法：<section></section>
取代：<div id="main"></div>
4、<article>元素
作用：通常用于描述论坛帖子，报纸的文章，博客信息或微博条目
语法：<article></article>
取代：<div id="article"></div>
5、<aside>元素
作用：描述页面中的边栏信息
语法：<aside></aside>
取代：<div id="left_side"></div>
6、<footer>元素
作用：定义页面中底部的信息
语法：<footer></footer>
取代：<div id="footer"></div>
3、表单（重难点）【关联服务器和输入数据的纽带】
1、表单的作用
用于收集信息并将信息提交给服务器
表单的两个基本部分
1、实现数据交互的可见界面元素—表单控件
2、表单提交后的处理
2、表单元素
表单：收集用户数据，并且提交给服务器
语法：
1、标记
<form></form>
注意：只有放在form里的表单控件才能被提交
2、属性
1、action
要提交给服务器处理程序的地址
默认提交给本页
2、method
提交方式，默认值是 get
取值：
1、get
1、以明文方式提交数据
2、安全性较低
3、大小限制为2KB（与浏览器有关，IE 限制2KB，Chrome 限制8KB ，行业中以限制大小最小为标准大小）
4、向服务器要数据时，使用get
2、post
1、隐式提交
2、安全性较高
3、无大小限制
4、传递数据给服务器进行处理时，使用post
3、put
4、delete
5、... ...
3、enctype
指定表单数据的编码方式即指定什么样的数据可以提交给服务器
1、application/x-www-form-urlencoded（默认值）
默认值，允许将普通字符，特殊字符提交给服务器
2、multipart/form-data（用的比较少）
允许将文件提交给服务器
3、text/plain（一般不用）
只允许将普通字符提交给服务器。特殊字符，文件则不可以
4、name
定义表单的名称
3、表单控件
能与用户交换，并且提供可视化外观的HTML元素
表单控件，只有放在表单中，数据才可以被提交

表单控件分类：
1、input元素
2、textarea元素-多行文本域
3、select和option元素-选项框
4、其他元素

表单控件详解
1、input元素
1、作用：用于收集用户的信息
2、语法：<input>
3、属性：
1、type
根据type属性值，创建各种不同的输入控件
2、name
指定控件的名称，一般提交给服务器时使用
采用的是匈牙利命名法（控件缩写+作用）
3、value
控件的值，提交给服务器使用
4、disabled
禁用控件
该属性无值

4、input详解
1、文本框与密码框
文本框：<input type="text">
密码框：<input type="password">

特有属性：
1、name
缩写：txt
ex：txtUsername：用户名称的文本框
txtUserpwd：用户密码
2、maxlength：
限制输入的字符数
ex：
<input maxlength="15">
3、readonly
只读，只能看不能写
无值属性
2、单选按钮和复选框
单选按钮：<input type="radio">
复选框：<input type="checkbox">

属性：
1、name
单选按钮缩写：rdo
复选框缩写：chk
注意：name属性除定义名称外，还能分组，如果属于一组的单选按钮或复选框，名称必须相同
2、value
根据需求自己设定
3、checked
设置默认被选中
3、按钮
1、提交按钮
<input type="submit">
作用：功能预定义，负责将当前表单中的数据提交给服务器
2、重置按钮
<input type="reset">
作用：功能预定义，将表单中的数据恢复初始化的状态
3、普通按钮
<input type="button">
作用：无功能，可以由用户自定义的编写功能

属性：
1、name
2、value：定义按钮上的文本
button name缩写：btn
2、textarea元素
称为：多行文本域
语法：
1、标记
<textarea></textarea>
2、属性
1、name
定义名称，缩写 txt
2、cols
指定文本域显示的列数，变相的指定宽度
ex：
cols="50"
英文字符：显示50个
中文字符：显示25个
3、rows
指定文本域显示的行数，变相的指定高度
（如果显示行数不够，会自动出现滚动条）
4、readonly
只读
3、select 和 option元素-选项框（下拉列表/滚动列表）
称为：选项框
1、语法
1、<select></select>
作用：创建选项框（下拉，滚动）
属性：
1、name
控制名称，缩写 sel
2、size
指定选项框，默认显示选项的数量。
大于1的话，则为滚动列表，否则就是下拉选项框
3、multiple
设置多选
无值
2、<option>显示的数据</option>
选项
属性：
1、value
提交给服务器的数据
2、selected
预选中
4、其他元素
1、浮动框架
1、什么是浮动框架
可以在一个浏览器窗口中能够同时显示多个HTML文档内容
2、语法
<iframe>文本内容</iframe>
属性：
1、src
浮动框架中引入的页面url
2、width
宽度
3、height
高度
4、frameborder
边框，如果不想要边框，则将frameborder改为0

1、label元素（标签）
作用：关联文本和表单控件的。关联之后，单击文本，就如同单击表单控件一样

语法：
<label>文本</label>
属性
for：表示要与该文本关联的控件的ID值
2、为控件分组
<fieldset></fieldset>：为控件分组
<legend></lengend>:为分组指定标题
2、摘要与细节
1、作用
可以通过用户的点击操作，来显示/隐藏某一部分内容
2、语法
<details></details> ：定义摘要和细节
<summary></summary> ：定义允许被用户点击的标题文本
注意：summary 必须是details中的第一对子元素
3、度量元素
1、语法
<meter></meter>
作用：表示度量元素，比如：投票的比例，电池的电量... ...
2、属性
1、min：定义度量范围的最小值，默认为0
2、max：定义度量范围的最大值，默认为1，通常情况会将其改为100
3、value：当前显示在度量元素上的值
4、时间元素
1、作用
关联时间的不同表现形式
2、语法
<time>文本</time>
属性：
datatime：表示关联的日期和时间，如果同时关联日期和时间的话，中间用 T 分割
5、高亮文本显示
1、作用
以突出的背景颜色显示文本
2、语法
<mark>文本</mark>
4、隐藏域和文本选择框
1、隐藏域：<input type="hidden">
作用：想提交给服务器，但不想让用户看到的数据，可以保存在隐藏域中。
缩写：txt
2、文件选择框
<input type="file">
缩写：txt
注意：
1、method 必须设置为 post

2、enctype 必须设置为multipart/form-data

具体实例：

<!doctype html>
<html>
	<head>
		<title>Insert your title</title>
		<meta charset="utf-8">
	</head>
	<body>
		<!-- 
			1、作用：将里面所有的表单控件的数据提交给服务器
			2、提交方式：get
			3、动作地址：本页
			4、编码方式：application/x-www-form-urlencode	
		-->
		<form>
			<fieldset>
				<legend>基本信息</legend>
				<p>
					用户名称：
					<input type="text" name="txtUsername" value="请输入您的名称">
				</p>
				<p>
					用户密码：
					<input type="password" name="txtUserpwd">
				</p>
			</fieldset>
			<p>
				<!-- 注意：只有一组内的单选按钮才能实现单选功能。通过 name 属性进行分组 -->
				用户性别：
				<input type="radio" name="rdoGender" value="male" checked>男
				<input type="radio" name="rdoGender" value="female" id="rdoFemale">
				<label for="rdoFemale">女</label>
			</p>
			<p>
				用户爱好：
				<input type="checkbox" name="chkHobby" value="eat">吃
				<input type="checkbox" name="chkHobby" value="drink">喝
				<input type="checkbox" name="chkHobby" value="play">玩
				<input type="checkbox" name="chkHobby" value="happy">乐
				<input type="hidden" name="txtUserID" value="U1234567890">
			</p>
			<p>
				用户头像：
				<input type="file" name="txtImage">
			</p>
			<p>
				自我介绍：
				<textarea name="txtIntro" cols="50" rows="4">这家伙很懒，什么都没留下......</textarea>
			</p>
			<p>
				籍贯选择：
				<select name="selJiguan" size="5" multiple>
					<option value="-1">===请选择===</option>
					<option value="1">北京</option>
					<option value="2">上海</option>
					<option value="3">天津</option>
					<option value="4">重庆</option>
				</select>
			</p>
			<p>
				<input type="submit" value="起飞">
				<input type="reset" value="恢复">
				<input type="button" value="普通按钮">
			</p>
		</form>
	</body>
</html>