每天15min-HTML5(12)-表单（下）

最新推荐文章于 2024-07-19 11:00:40 发布

由此及彼

最新推荐文章于 2024-07-19 11:00:40 发布

阅读量420

点赞数

分类专栏： JSP&Servlet学习笔记

本文链接：https://blog.csdn.net/hxqneuq2012/article/details/51647928

版权

JSP&Servlet学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

主要内容

1、下拉列表标签

2、label标签使用方法

3、filedset和legend标签的使用方法

下拉列表标签

在网页当中经常会需要让用户在一系列当中的选项当中选择一个，这个功能的需求有点像我们之前为大家介绍的单选按钮。但是有些时候选项太多，例如让用户选择自己的出生年份，按照今年来说这个选项至少应该提供从1950至2016，这么多选项如果都使用单选按钮列出来，肯定非常的不美观，所以说需要使用一种名为下拉列表的标签。

下拉列表标签名为select,每向网页当中插入一个select标签，就会在网页当中插入一个下来菜单，该标签有一种子标签名为option，option标签的作用就是在下拉列表当中插入一个选项，有多少个选项就需要有多少个option标签。

label标签的使用方法

在一个表单当中可能存在有多个输入标签，有的需要用户输入用户名，有的需要用户输入密码，有的需要用户输入邮箱，那么我们应当让用户明确这些控件的用途呢？

这个时候就需要使用label标签了，大家可以简单的理解它的作用就是给控件起一个名字。同时结合label标签的for属性和控件的id属性，还可以方便用户的操作。

获取鼠标焦点：

		<label for="username">userName</label>
		<input type="text" name="username" id="username">

filedset和legend标签的使用方法

在有些网站上可能会用到比较大的表单，这个时候的为了方便用户查看，就需要将表单当中的控件进行分组显示。此时就需要使用filedset标签和legend标签。

fieldset标签可以将表单内的相关元素分组，浏览器可以采用比较特殊的方式显示他们，比如加上边框，或者是3D效果等等。

而legend标签则可以给这些分好组的空间进行命名，让整个表单的结构看起来更加的清晰~

源代码：

<!DOCTYPE html>
<html>
<head>
	<title>form02</title>
	<meta charset="utf-8">
</head>
<body>
	<form action="" method="">		
		<select name="year">
			<option value="1994">1994</option>
			<option value="1995">1995</option>
			<option value="1996">1996</option>
			<option value="1997">1997</option>
		</select><br/>
		<label for="username">userName:</label>
		<input type="text" name="username" id="username">
		<fieldset>
			<legend>Name</legend>
			<label for="firstName">firstName</label>
			<input type="text" name="firstName" id="firstName">
			<label for="lastName">lastName</label>
			<input type="text" name="lastName" id="lastName">
		</fieldset>
		<br/>
		<fieldset>
			<legend>Name</legend>
			<label for="firstName">firstName</label>
			<input type="text" name="firstName" id="firstName">
			<label for="lastName">lastName</label>
			<input type="text" name="lastName" id="lastName">
		</fieldset>
	</form>
</body>
</html>

自学Mars老师的HTML5视频教程第一季第十二集-- 表单（下）。

代码地址：https://github.com/HXQWill/Quan_Mars_HTML/blob/master/form02.html