html中常用的标签-表单标签

最新推荐文章于 2024-03-23 18:05:24 发布

原创最新推荐文章于 2024-03-23 18:05:24 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

Html CSS-广陵散专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了HTML中的表单标签，包括表单的基本结构、常用属性如action和method，以及各种输入项如文本输入、密码输入、单选和复选框等。此外还讲解了表单提交的数据格式及name和value属性的作用。


表单标签（****今天最重要的标签****）
	* 可以提交数据到开心网的服务器，这个过程可以使用表单标签实现

	* <form></form>: 定义一个表单的范围
		- 属性
			** action： 提交到地址，如果不写默认提交到当前的页面
			** method:  表单提交方式 
				- 常用的有两种  get和post，默认是get请求

			** 面试题目： get和post区别
				1、get请求地址栏会携带提交的数据，post不会携带（请求体里面。在第七天时候讲http协议时候）
				2、get请求安全级别较低，post较高
				3、get请求数据大小的限制，post没有限制
			
			** enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性（第22天时候讲文件上传）
    -----------------------------------------------------------------------------
	** 输入项：可以输入内容或者选择内容的部分
		- 大部分的输入项 使用  <input type="输入项的类型"/>

		******* 在输入项里面需要有一个name属性

		*** 普通输入项：<input type="text"/>
		*** 密码输入项：<input type="password"/>


		*** 单选输入项：<input type="radio"/>
			- 在里面需要属性 name
			- name的属性值必须要相同
			- 必须有一个value值

			**** 实现默认选中的属性 
				-- checked="checked"

		*** 复选输入项：<input type="checkbox"/>
			- 在里面需要属性 name
			- name的属性值必须要相同
			- 必须有一个value值

			**** 实现默认选中的属性 
				-- checked="checked"
		
		*** 文件输入项（在后面上传时候用到）
			- <input type="file"/>
		

		*** 下拉输入项（注意它不是在input标签里面的）
			<select name="birth">
				<option value="1991">1991</option>
				<option value="1992">1992</option>
				<option value="1993">1993</option>
			</select>

			- 默认选择
				*** selected="selected"
		
		*** 文本域
			<textarea cols="10" rows="10"></textarea>
		
		*** 隐藏项（不会显示在页面上，但是存在于html代码里面）
			<input type="hidden" />
		
		*** 提交按钮
			<input type="submit"/>
			<input type="submit" value="注册"/>
			
			- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
			 ?sex=on&love=on&love=on&birth=1991
			
			当在输入项里面写了name属性之后 
			- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
			?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=

			写了value属性之后
			- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html?
			phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=

			** ?输入项name的值=输入的值&
			** 参数类似于key-value形式

		*** 使用图片提交,点击图片,提交表单（实际开发也不会这么用）
			<input type="image" src="图片路径"/>
		
		*** 重置按钮： 回到输入项的初始状态
			<input type="reset"/>
		
		*** 普通按钮(和明天讲js在一起使用的)
			<input type="button" value=""/>


<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<form action="01-hello.html" method="get">
			手机号码：<input type="text" name="phone" /><br/> 
			创建密码：<input type="password" name="pwd" /><br/> 
			性别：
			<input type="radio" name="sex" value="nv" checked="checked" />女 
			<input type="radio" name="sex" value="nan" />男<br/> 
			爱好：
			<input type="checkbox" name="love" value="y" />羽毛球 
			<input type="checkbox" name="love" value="p" checked="checked" />乒乓球
			<input type="checkbox" name="love" value="pp" /> 排球<br/> 
			文件：<input type="file" /><br/> 
			生日：<select name="birth">
				<option value="0">请选择</option>
				<option value="1991" selected="selected">1991</option>
				<option value="1992">1992</option>
				<option value="1993">1993</option>
			</select><br/> 
			自我描述：
			<textarea cols="10" rows="10" name="tex"></textarea><br/> 
			隐藏项：<input type="hidden" name="hid" /><br/>
			<input type="submit" value="注册" />
			<input type="reset" value="重置注册" />

			<input type="button" value="普通按钮" />
			<br/>
			<!--  <input type="image" src="a.jpg"/>-->
		</form>
	</body>

</html>