23-Web-表单和CSS基础

最新推荐文章于 2024-08-17 13:31:03 发布

qq_48486897

最新推荐文章于 2024-08-17 13:31:03 发布

阅读量287

点赞数

文章标签： html 列表 css html5

本文链接：https://blog.csdn.net/qq_48486897/article/details/107760777

版权

本文详细介绍了HTML5中的表单元素，包括input、select和textarea标签的使用，以及CSS的基础语法，如选择器、优先级、伪类选择器和核心属性的讲解。

摘要由CSDN通过智能技术生成

1.表单标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.表单标签：form
			form
		 -->
		 <form action="" method="">	
		 </form>
	</body>
</html>

2.input标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- input标签会因为type属性值不同功能完全不一样 -->
		<!-- 1.文本输入框: text
			name属性：对输入框输入的数据进行说明和区分的(类似字典的key)
			value属性：就是输入框中输入和显示的内容(和输入框中的内容是双向绑定)
			placeholder属性：输入框中的提示信息
			maxlength属性：最大输入的文字的个数
		 -->
		<label for="tel">手机号:</label>
		<input id="tel" type="text" name="tel"  value="15300022703" placeholder="请输入手机号码" maxlength="11"/>
		<br>
		<br>
		
		<label for="uname">用户名:</label>
		<input id="uname" type="text" name="username"  value="" placeholder="请输入用户名"/>
		<br>
		<br>
		<!-- 2.密码输入框：password 
			name属性：对输入框输入的数据进行说明和区分的(类似字典的key)
			value属性：就是输入框中输入和显示的内容(和输入框中的内容是双向绑定)
			placeholder属性：输入框中的提示信息
			maxlength属性：最大输入的文字的个数
		-->
		<label for="pw">密码:</label>
		<input id="pw" type="password" name="pw" value="123456" placeholder="请输入密码"/>
		<br>
		<br>
		
		<!-- 3.单选按钮: radio
			name属性：同一组选项的name属性必须相同，才能做到单选的效果
			value属性：指定按钮选中的时候对应的值
			checked属性：设置默认选中
		-->
		<font>性别：</font>
		
		<input checked="checked" type="radio" name="sex" value="男" id="boy"/><label for="boy">男</label>
		<input type="radio" name="sex" value="女" id="girl"/><label for="girl">女</label>
		<br><br>
		
		<!-- 4.复选按钮: checkbox
			name属性：同一组选项的name属性必须相同
			value属性：指定按钮选中的时候对应的值
			checked属性：设置默认选中
		-->
		<font size="" color="">爱好：</font>
		<input type="checkbox" name="hobby" id="b" value="篮球" /><label for="b">篮球</label>
		<input checked="checked" type="checkbox" name="hobby" id="p" value="乒乓球" /><label for="p">乒乓球</label>
		<input type="checkbox" name="hobby" id="y" value="羽毛球" /><label for="y">羽毛球</label>
		<input type="checkbox" name="hobby" id="w" value="网球" /><label for="w">网球</label>
		<br><br>
		
		<!-- 5.按钮：button 
		-->
		<input type="button" name="" id="" value="确定" />
		<input type="button" name="" id="" value="取消" />
		<br><br>
		<!-- button标签 -->
		<button type="button">确定</button>
		<button type="button"><img src="./img/baidu.ico" ><br>百度</button>
		<br><br>
		
		<!-- 6.重置按钮 和 提交按钮
			重置：重置当前form标签中所有的相关标签的状态
			提交：将<strong>当前form标签</strong>中所有设置了name属性的相关标签以: name=value 形式对应数据进行提交
		-->
		<input type="reset" name="" id="" value="重置1" />
		<br><br>
		<br>
		<form action="" method="get">
			<input type="text" name="username" placeholder="用户名"/>
			<br><br>
			<input type="password" name="password" id="" value="123" placeholder="密码"/>
			<br><br>
			<input type="reset" value="重置2"/>
			<input type="submit" name="" id=""<

最低0.47元/天解锁文章

qq_48486897

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
23-Web-表单和CSS基础

1.表单标签<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body>  <form action="" method=""> </form> </body>&
复制链接

扫一扫