form表单

最新推荐文章于 2020-07-06 16:02:56 发布

WhiteBol

最新推荐文章于 2020-07-06 16:02:56 发布

阅读量134

点赞数

分类专栏：前端学习文章标签： HTML5

本文链接：https://blog.csdn.net/qq_39660309/article/details/85227694

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5表单相关的元素和属性

HTML使用表单向服务器提交请求，表单、表单控件的主要作用就是手机用户输入、当用户提交表单时，用户输入胡内容将被作为请求参数提交到远程服务器。因此在Web编程中，表单主要用于收集用户输入的数据。在需要与用户交互的Web页面中，表单、表单控件都是极为常用的。

1.1form

元素

action:指定当点击表单内的“确认”按钮时，该表单被提交到哪个地址。该属性既可指定一个绝对地址，也可指定一个相对地址。

method:指定提交表单时发送何种类型的请求，该属性可以是get或post，分别用于发送GET或POST请求。通常建议发送POST请求。

enctype:指定对表单内容进行编码所使用的字符集

name:指定表单的唯一名称，建议该属性值与id属性值保持一致。

target:指定使用哪种方式打开目标URL（提交请求会打开另一个URL资源），与超链接的target可接受的属性值完全一样，该属性可以是_blank、_parent、_self和_top四个值其中之一

GET方式的请求:GET方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，因此可以在地址栏中看到请求参数名和值。且GET请求传送的数据量较小，一般不能大于2KB。（在使用超链接提交请求时，只能提交GET请求）

POST方式的请求:POST方式传送的数据量较大，通常认为POST请求参数的大小不受限制，但往往取决于服务器的限制，POST请求传输的数据量总比GET传输的数据量大。而且POST方式发送的请求参数以及对应的值放在HTML HEADER中传输，用户不能再地址栏看到请求参数值，安全性相对较高。

input元素

input元素是表单控件中功能最丰富的，可以通过修改元素中的type属性来生成不同的控件。有如下的几种常用控件

单行文本框：type属性设置为text
密码输入框：type属性设置为password
隐藏域：type属性设置为hidden
单选框：type属性设置为radio
复选框：type属性设置为checkbox
图像域：type属性设置为img
文件上传域：type属性设置为file
提交、重设、无动作按钮：type属性分别设置为submit、reset、button。

如下代码定义了上面全部的表单控件元素，当单击提交按钮时，页面首先会导航到百度首页，之后以get方式将用户输入内容作为请求参数发送到该站点。（页面url后面可以看到提交的参数表单）

<!DOCTYPE html>
<html>
	<head>	
		<meta http-equiv = "Content-Type" content = "text/html charset = utf-8">
		<title>第一个forme练习</title>
	</head>
	<body>
		<form action = "https://www.baidu.com" method = "get">
		单行文本框：<input id = "username" name = "username" type = "text" /><br />
		不能编辑的文本框：<input id = "username2" name = "username2" type = "text" readonly = "readonly"><br />
		密码框：<input id= "password" name = "password" type = "password" /><br />
		隐藏框：<input id = "hidden" name = "hidden" type = "hidden" /><br />
		第一组单选框：<br/>
		红<input id = "color" name = "color" type = "radio" value = "red" / ><br/>
		绿<input id = "color2" name = "color" type = "radio" value = "green" / ><br/>
		蓝<input id = "color3" name = "color" type = "radio" value = "blue" / ><br/>
		第二组单选框:<br/>
		男：<input id = "gender" name = "gender" type = "radio" value = "male" /><br/>
		女：<input id = "gender2" name = "gender" type = "radio" value = "female" /><br/>
		两个复选框<br />
		可以选这个<input id = "website" name = "website" type = "checkbox" /><br />
		也可以选这个<input id = "website2" name = "website" type = "checkbox" /><br />
		文件上传域：<input id = "file" name = "file" type = "file" / ><br/>
		图片域：<input type = "image" src = "http://img5.imgtn.bdimg.com/it/u=935292084,2640874667&fm=26&gp=0.jpg" style = "width:120px;height:80px" / ><br/>
		<select>
			<option value = "java">java语言</option>
			<option value = "c">c语言</option>
			<option value = "ruby">ruby语言</option>
		</select>
		<input type = "submit" id = "ok" name = "ok" value = "提交"/><br/>
		<input type = "submit" id = "dis" name = "dis" value = "提交" disabled/><br/>
		<input type = "reset" id = "cancel" name = "cancel" value = "取消" /><br/>
		<input type = "button" id = "no" name = "no" value = "无动作" /><br/>
		
		</form>
	
	</body>
</html>

将内容填充后提交，然后看到百度的url后加入了参数
在这里插入图片描述

WhiteBol

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
form表单

HTML5表单相关的元素和属性HTML使用表单向服务器提交请求，表单、表单控件的主要作用就是手机用户输入、当用户提交表单时，用户输入胡内容将被作为请求参数提交到远程服务器。因此在Web编程中，表单主要用于收集用户输入的数据。在需要与用户交互的Web页面中，表单、表单控件都是极为常用的。1.1form元素action:指定当点击表单内的“确认”按钮时，该表单被提交到哪个地址。该属性既可指定...
复制链接

扫一扫

专栏目录