HTML5表单

最新推荐文章于 2021-06-09 10:34:50 发布

Crazy Monkey

最新推荐文章于 2021-06-09 10:34:50 发布

阅读量545

点赞数 1

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/qq_35892775/article/details/82799628

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

HTML通过表单向服务器提交请求，主要有两种方式、；GET和POST两种。GET：会将请求的参数的名和值转换为字符串，附在原URL之后，请求传输的数据量小，通过浏览器一般不大于2KB,非浏览器可大于2KB；POST：不会将请求的参数的名和值转换为字符串放在URL，而是放在HTML HEADER中，请求传输的数据量大，安全性高。

1.基本元素

<form.../>:用于生成form表单；

<action>: 表单被提交的地址，必填；

<method>：请求类型，默认为get;

<target>:打开目标URL的方式；

2.input元素

单行文本框：指定<input.../>元素的type值为text；

密码输入框：指定<input.../>元素的type值为password；

隐藏框：指定<input.../>元素的type值为hidden；

单选框：指定<input.../>元素的type值为radio；

复选框：指定<input.../>元素的type值为checkBox；

图像域：指定<input.../>元素的type值为image，可指定width和height；

文件上传域：指定<input.../>元素的type值为file；

提交、重置、无动作按钮：指定<input.../>元素的type值为submit、reset、button；

checked属性：单选框和复选框初始状态选中；

disabled：首次加载时禁用此元素。


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>可拖动</title>
</head>

<body>
<form action="https://search.jd.com/Search" method="get">
	单行文本框：<input id="usename" name="keyword" type="text"/><br/>
	不能编辑的文本框：<input id="username2" name="username" 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" />
	绿：<input id="color" name="color" type="radio" value="green" />
	蓝：<input id="color" name="color" type="radio" value="blue" /><br/>
	第e二组单选框：<br/>
	男：<input id="gender" name="gender" type="radio" value="male" />
	女：<input id="gender2" name="gender" type="radio" value="female" /><br/>
	两个复选框：<br/>
	<input id="website" name="website" type="checkbox" value="leegang.org" />
	<input id="website2" name="website" type="checkbox" value="crazyit.org" /><br/>
	文件上传域：<input id="file" name="file" type="file"  /><br/>
	图像域：<input type="image" src="images/小和尚.jpg"  alt="小和尚"  width="27" height="31" /><br/>
	下面是四个按钮：<br/>
	<input id="ok" name="ok" type="submit" value="提交" />
	<input id="dis" name="dis" type="submit" value="提交" disabled />
	<input id="cancel" name="cancel" type="reset" value="重填" />
	<input id="no" name="no" type="button" value="无动作" />


</form>

</body>
</html>

运行效果：