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


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

	* <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>


补充知识:

<input>标签的name属性:

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。

注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

--------------------------------------------------------------------------------------------------------------------------------------

<input>标签的value属性:

value 属性为 input 元素设定值。

对于不同的输入类型,value 属性的用法也不同:

type="button", "reset", "submit" - 定义按钮上的显示的文本

type="text", "password", "hidden" - 定义输入字段的初始值

type="checkbox", "radio", "image" - 定义与输入相关联的值

注释:<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

注释:value 属性无法与 <input type="file"> 一同使用。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZHOU_VIP

您的鼓励将是我创作最大的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值