HTML5--form表单及常用控件

最新推荐文章于 2022-03-14 21:57:23 发布

PP_Boy

最新推荐文章于 2022-03-14 21:57:23 发布

阅读量2.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_37618340/article/details/80958855

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML通过使用表单向后台服务器提交请求，表单的作用主要就是收集用户的输入，当提交表单时，用户输入的内容将作为请求参数提交到远程服务器。表单中的需要提交数据的项都必须指定name属性，并且name的值不能相同（单选框和复选框的name属性可以相同，在提交数据时，它们会作为一组数据进行提交）。

一、form元素

属性：

action:指定表单的提交地址（必填）

method:指定表单的提交方式，可以是get或者post，分别代表get和post请求。

GET方式请求：会将请求参数的名和值转换成字符串，并且附加在URL之后，因此可在地址栏中看到请求参数名和值。

POST方式请求：post可以用来传输数据量较大的数据，而且以post方式发送请求参数以及对应的值放在HTML HERDER中传输，请求参数不会显示在URL参数中，安全性相对较高。

enctype：指定字符集，一般用于解决表单乱码问题。

name : 指定表单的唯一名称，通常建议与id属性值设置为一样

target : 打开目标界面方式，是否在新页面打开。

二、input元素

在form表单中的input必须设置name属性，否则输入的信息将无法提交到服务器。

<input>标签中通过设置不同的type值，会产生不同的效果。

以下时 type 属性值所对应的效果:

text : 单行文本框

password ：密码框

hidden ：隐藏域

radio ：单选框

checkbox ：复选框

image ：图像域（图像域中使用width和height属性可以生效，其余地方不能生效）

file ：文件上传域

submit ：提交按钮（点击后会自动将表单中的数据提交到action所指向的路径中）

reset ：重置，清空表单

button ：普通按钮，一般需要绑定事件才能够起作用

非type属性：

checked ：用于单/复选框，当该属性设置为true时，默认为选中状态。

disabled ：表示禁用。

maxlength ：用于限制文本框中的最大的文本数

readonly : 限制文本框中的值不允许用户修改

width : 用于指定图像宽度，只对图像生效

height ：用于指定图像高度，只对图像生效

二、实例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="#" method="get">
			单行文本框：<input type="text" name="username" /><br />
			不能编辑的文本框：<input type="text" name="name" readonly="readonly" /><br />
			密码框：<input type="password" name="password" /><br />
			隐藏域：<input type="hidden" name="hidden" /><br />
			第一组单选框:<br />
			红：<input type="radio" name="color" value="red"/>
			绿：<input type="radio" name="color" value="green"/>
			蓝：<input type="radio" name="color" value="blue"/>
			<br />
			第二组单选框：<br />
			男性：<input type="radio" name="sex" value="boy" />
			女性：<input type="radio" name="sex" value="girl" />
			<br />
			两个复选框：<br />
			<input type="checkbox" name="check" />
			<input type="checkbox" name="check" />
			<br />
			文件上传域：<input type="file" name="file" /><br />
			图像域：<input type="image" src="1.jpg" alt="图片提示" name="img" width="100px" height="100px"/><br />
			下面是四个按钮：<br />
			<input type="submit" value="提交"/>
			<input type="submit" value="提交" disabled="disabled" />
			<input type="reset" value="重置" />
			<input type="button" value="无动作" />
		</form>
	</body>
</html>