表单的补充

最新推荐文章于 2023-12-09 10:24:55 发布

clqxmt

最新推荐文章于 2023-12-09 10:24:55 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：表单的组成表单中的fieldet标签表单中的label标签表单中的egend标签表单中的file image hidden类型

本文链接：https://blog.youkuaiyun.com/weixin_43755513/article/details/97786036

CSS 专栏收录该内容

68 篇文章

订阅专栏

表单的补充

1.表单的组成：表单域（from）、表单控件（input）、提示信息（label）
2.表单字段集：fieldset：是一个块元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			fieldset{height:200px; border:1px solid #0f0;}
		</style>
	</head>
	<body>
		<fieldset disabled>
			用户名：<input type="text" /><br />
			密码：<input type="password" /><br />
			邮箱：<input type="text" />
		</fieldset>
	</body>
</html>

3.表单字段集标题：legend
放在fieldset里的第一个位置
legend是一个块元素，有一个属性align：left/top/center水平对齐方式（不常用）IE不支持。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			fieldset{height:300px;}
			legend{ padding:0 20px; border:1px solid #000;}
		</style>
	</head>
	<body>
		<form action="">
			<fieldset>
				
				<legend>用户登录</legend>
			     用户名：<input type="text" />
			     密码：<input type="password" />
			</fieldset>
			
		    
		</form>
		
	</body>
</html>

4.提示信息：label（提高用户体验）是内联元素
有两种使用方法：
（1）当点击用户名的时候光标会自动锁定用户名后面的文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="">
			<label>用户名：<input type="text" /></label><br />
		</form>
	</body>
</html>

（2）把文本框前面的文字用label包裹，不仅可以实现锁定文本框，还可以实现文字的左、中、右对齐（比较常用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			label{text-align:right;width:100px; display:inline-block; }
		</style>
	</head>
	<body>
		<form action="">
			<label for="use">电子邮箱：</label><input type="text" id="use"/><br />	
			<label for="phone">电话：</label> <input type="text" id="phone"/>
		</form>
	</body>
</html>

5.文件域：

<input type="file" multiple>
multiple属性可以实现选择多个文件

6.图片域

<input type="image" src="图片路径"  width="" alt="" title="">

7.隐藏按钮：一般是后台人员调试代码的时候使用

<input type="hidden" value="按钮">