HTML5中的form表单

最新推荐文章于 2025-07-10 18:05:30 发布

原创最新推荐文章于 2025-07-10 18:05:30 发布 · 8k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #表单 # input元素

HTML 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了HTML中的表单元素，包括<form>元素及其关键属性如action、method等，同时覆盖了<input>元素的不同类型，如文本框、密码框、单选框、复选框等，并解释了GET与POST请求的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<form> 元素用于生成输入表单，该元素不会生成可视化部分，它除了通用属性id、style、class外，还可以指定onclick事件，除此之外，还有以下几个属性：

        Action：指定当单击表单内的确认按钮时，该表单被提交到那个地址。该属性既可以指定一个绝对地址，也可以指定一个相对地址，该属性必填，非常重要！
        method：指定提交表单时发送何种请求，该属性有get和post两种值，通常建议发送post请求，该属性必填。表单默认以get方式提交请求。
Get请求和post请求的区别如下：
        GET请求方式：直接在浏览器地址栏中输入访问地址所发送的请求，或提交表单发送请求时，该表单对应的form元素没有设置method属性，或设置了method属性为get，这几种都是get方式的请求。Get方式的请求会将请求参数的名和值转换为字符串，并附加在原url之后，因此可以在地址栏中看到请求参数的名和值。且get请求传送的数据量较小。
        Post方式的请求：这种方式通常使用提交表单的方式来发送，并且不要设置form的method属性为post。Post方式传送的数据量较大，通常认为post请求参数的大小不受限制，但往往取决于服务器的限制，post请求传输的数据量总比get传输的数据量大，而且post方式发送的请求参数以及对应的值放在HTML HEADER中传输，用户不能在地址栏中看到请求的参数值，安全性相对较高。

name:指定表单的唯一名称，建议该属性值与id属性值保持一致。
Target：该属性有4个属性值，指定使用哪种方式打开目标url。_self,_black_,_parent，_top分别指定使用自身，一个新的页面，顶级框架，父框架来加载form请求。

Input元素：

单行文本框：指定<input.../>元素的type属性值设为true即可。
密码输入框：指定<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即可。

<input.../>元素除了可以指定id、style和class等核心属性外，也可以指定onclick事件属性，还可以指定onfocus，onblur等焦点事件属性，初次之外，还有一下几个属性：
checkbox：设置单选框，复选框初始状态是否处于选中状态，该属性是支持boolean值的属性，表示初始即被选中。只有当type属性值为checkbox或redio是才可以指定该属性。
disable：设置首次加载时禁用此元素。该属性是支持boolean值得属性，表示该元素被禁用，该元素无法获取输入焦点，无法选中，无法在其中输入文本，无法响应鼠标事件。
Maxlenggth：该属性值是一个数字，指定文本框中所允许输入的最大字符数。
Readonly：指定该文本框中的值不允许修改。
Size：该属性是一个数字，指定元素的宽度。当type=”hidden”时指定该属性没有意义。

<!DOCTYPE html>
   <html>
	<head>
		<meta charset="utf-8">
		<title>我的标头</title>
	</head>
	<body>
	<form action="#" name="" method="get">
	 单行文本框：<input type="text" name="text_1"/><br/>
	 不能编辑的文本框：<input  type="text" disabled=true name="dis_1"/><br/>
	 密码框 ：<input type="password" name="pass_1"/><br/>
	 隐藏域：<input type="hidden" name="hidden_1"/><br/>
	第一组单选框：<br/>
	红：<input type="radio" name="radio_1" />
	绿：<input type="radio" name="radio_1"/>
	蓝：<input type="radio" name="radio_1"/><br/>
	第二组单选框：<br/>
	男：<input type="radio" name="radio_2"/>
	女：<input type="radio" name="radio_2"/><br/>
	两个复选框：<br/>
	    <input type="checkbox" name="checkbox_1"/>
		<input type="checkbox" name="checkbox_1"/><br/>
	文件上传域：<input type="file" name="file_1"/><br/>
	图像域：<input type="image" src="http://tpc.googlesyndication.com/daca_images/simgad/10124780724188129882" style="height:100px" name="image_1"/><br/>
	下面是四个按钮：<br/>
	<input type="submit" name="submit_1"/>
	<input type="submit"  disabled=true name="dis_2"/>
	<input type="reset" name="reset_1"/>
	<input type="button" name="btn_1" value="无动作"/>
	
	
	</form>
	
	</body>
  </html>

效果如下：