HTML-表单标签

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

Tommy5553

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

阅读量154

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Tommy5553/article/details/80783793

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

表单标签

可以提交数据到服务器，这个过程可以使用表单标签来实现。

<form></form>：定义一个表单的范围

属性：

action：提交的地址，默认是当前页面。

method：表单的提交方式

常用的两种：get和post，默认是get请求。

面试题目：get和post的区别

1、get请求地址栏会携带提交的数据，post不会携带（数据在请求体里面）。

2、get请求安全级别较低，post较高。

3、get请求有数据大小的限制，post没有限制。

enctype：一般不需要这个属性，文件上传的时候用到这个属性。

输入项：可以输入内容或者选择内容的部分,输入项里面必须有name属性，提交才有内容

大部分的输入项使用<input type = "输入项的类型"/>

普通输入项：<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标签里面）：

<option>vaule = "1991"</option>

<option>vaule = "1992"</option>

<option>vaule = "1993"</option>

</select>

设置默认选中的属性：

selected = "selected"

文本域

隐藏项（不会显示在页面上，但是存在于html代码里面）

提交按钮

当在输入项里面加了name和value属性之后

file:///F:/HTML_PROJ/学习/hello.html?phoneNumber=111&password=111&sex=man&hobby=Y&birth=&tex=111

使用图片提交

重置按钮（回到输入项的初始状态）

普通按钮（和JS一起使用）

代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
	<!-- 表单标签 -->
	<form action = "hello.html" method = "get">
		手机号码：<input type = "text" name = "phoneNumber"/><br/><br/>
		创建密码：<input type = "password" name = "password"/><br/><br/>
		性别：<input type = "radio" name = "sex" value = "man" checked = "checked"/>男 <input type = "radio" name = "sex" value = "woman"/>女<br/><br/>
		爱好：<input type = "checkbox" name = "hobby" value = "Y"/>羽毛球 <input type = "checkbox" name = "hobby" value = "P"/>乒乓球 <input type = "checkbox" name = "hobby" value = "L"/>篮球<br/><br/>
		文件：<input type = "file"/><br/><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/><br/>
		自我描述：<textarea cols = "40" rows = "10" name = "tex"></textarea>	<br/><br/>
		隐藏项：<input type = "hidden"/><br/><br/>
		提交按钮：<input type = "submit" value = "注册"/>重置按钮：<input type = "reset"/>
		普通按钮：<input type = "button" value = "普通按钮"/><br/><br/>
		图片提交按钮：<input type = "image" src = "1.jpg" width = "100" height = "30"/>
		


	</form>
 </body>
</html>

效果：