HTML常用标签（表单）（四）

最新推荐文章于 2024-05-14 22:39:54 发布

咸鸭蛋炒饭

最新推荐文章于 2024-05-14 22:39:54 发布

阅读量377

点赞数

分类专栏： HTML5基础篇文章标签： css html 布局标签

本文链接：https://blog.csdn.net/u010853130/article/details/54908336

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.表单:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			在网页中，我们通过表单来向服务器提交信息
			
			在网页中使用form标签来创建一个表单
				- form中还必须有一个action属性
					action需要的是一个服务器的地址，这样当提交表单时，我们所填写的信息将会提交到action对应的地址
		-->
		<form action="target.html">
			<!--
				使用form创建完表单以后，还需要向表单中添加表单项
			-->
			
			<!--
				文本框
					- 使用input标签来创建一个文本框
						文本框需要一个type属性，属性值是text
					- 如果希望表单中的内容会提交到服务器中，
						还必须为元素指定一个name属性,当添加了name属性以后，填写的内容才会被提交到服务器
						
					- 用户填写的内容，默认会以查询字符串的形式发送给服务器，
						username=admin&password=123123
					- 查询字符串实际上就是一个名值对结构，名字就是表单项的name属性值，
						而值是用户填写的内容，多个名值对之间使用&连接
						这样数据发送给服务器以后，服务器就可以根据name来获取用户填写的值
			-->
			用户名 <input type="text" name="username" />
			<br /><br />
			
			<!--
				密码框
					- 密码框使用input标签，他的type属性是password
				
			-->
			密码 <input type="password" name="password" />
			<br /><br />
			
			<!--
				单选按钮
					- 使用input标签来创建单选按钮，它的type属性值是radio
					- 单选按钮需要通过name属性进行分组，name属性值相同属于一组
					- 像这种选择框，不需要用户填写内容的，还必须指定一个value属性
						如果指定了value属性，则当提交表单时，value属性的值将会提交到服务器
						
					- 如果需要设置某个单选按钮或多选框为默认选中状态
						可以在元素中添加一个属性checked="checked"
			-->
			性别 <input type="radio" name="gender" value="male" />男 
				<input type="radio" name="gender" value="female" checked="checked" />女
			
			<br /><br />
			
			
			<!--
				多选框
					- 使用input来创建多选框，它的type属性是checkbox
			-->
			爱好 <input type="checkbox" name="hobby" value="lq" /> 篮球
				<input type="checkbox" name="hobby" value="ymq" /> 羽毛球
				<input type="checkbox" name="hobby" value="ppq" checked="checked" /> 乒乓球
				<input type="checkbox" name="hobby" value="zq"/> 足球
				
				<br /><br />
				
				
			<!--
				下拉列表
					- 使用select标签来创建一个下拉列表
					- 使用option标签来向下拉列表中添加选项	
					- name属性需要指定给select，value需要指定给option
					- 在select标签中还可以使用optgroup来对选项进行分组
					- 可以通过为option添加一个属性 selected="selected" 来将其设置为默认选中
					- 如果在select中添加一个 multiple="multiple" ，则下拉列表会变成多选的下拉列表
				
			-->	
			你最喜欢的明星 
				<select name="star" multiple="multiple">
					<optgroup label="女明星">
						<option value="fbb">范冰冰</option>	
						<option value="zw">赵薇</option>	
						<option value="lxr">林心如</option>	
					</optgroup>
					<optgroup label="男明星">
						<option value="ldh">刘德华</option>	
						<option value="wyz">吴彦祖</option>	
						<option value="pcj" selected="selected">潘长江</option>	
					</optgroup>
				</select>
				
			<br /><br />
			<!--
				提交按钮
					- 提交按钮可以将表单中的信息提交到服务器
					- 使用input标签来创建一个提交按钮
						提交按钮的type属性，值是submit
					- 在提交按钮中可以通过value属性来指定按钮上的文字	
			-->
			<input type="submit" value="注册" />
			
			<!--
				重置按钮
				 - 重置按钮可以将表单恢复到默认状态
			-->
			<input type="reset" value="Reset" />
			
			<!--
				如果将type设置button则会创建一个单纯的按钮，
					这个按钮只有一个功能就是被点
			-->
			<input type="button" value="按钮" />
			
			<br /><br />
			
			<!--
				也可以使用button来创建按钮，它的作用和input的按钮是一样的，
				不同的是button是成对的标签，而input是自结束标签，
				相比来说button标签更灵活一些
			-->
			<button type="submit">提交</button>
			<button type="reset">重置</button>
			<button type="button">按钮</button>
			
			
			
		</form>
	</body>
</html>