HTML4.01超文本标记语言-HTML表单标签

最新推荐文章于 2024-09-08 20:13:55 发布

来聊前端

最新推荐文章于 2024-09-08 20:13:55 发布

阅读量73

点赞数

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

本文链接：https://blog.csdn.net/qq_36893834/article/details/131736735

版权

HTML 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

HTML表单标签

学习目标

在这里插入图片描述

表单介绍

在这里插入图片描述

表单是HTML中重要组成部分，是网页提供的一种交互式操作手段，主要用于采集和提交用户输入的信息。

表单语法

在HTML中，只要在需要使用表单的地方插入成对的表单标记<form></form>，就可以完成表单的基本定义，基本语法如下。

<form name="formName" method="post/get" action="url" ></form>

属性	描述
name	表单名称
method	表单发送的方式，可以是"post"或者"get"
action	表单处理程序提交地址
enctype	表单编码方式

enctype表单编码方式可选属性

enctype
application/x-www-form-urlencoded	默认，但是在传文本和MP3，图片等时效率低下。
multipart/form-data	指定传输的文件为二进制格式，可以用于传输图片、MP3等。
text/plain	纯文体的传输，空格转换为“+”，但不对特殊字符编码。

表单是网页提供的交互式操作手段，首先，用户必须在表单控件中输入必要的信息，发送服务器请求相应，然后服务器将结果返回给用户，这样就体现出交互。

input标记的type属性值及描述

属性	描述
text	文本框
password	密码框
file	文件框
checkbox	复选框
radio	单选框
button	普通按钮
reset	重置按钮
submit	提交按钮
select	下拉框
option	列表项
textarea	文本域
hidden	隐藏域
value	默认值
size	表单大小
readonly	只读属性
disabled	禁用属性
placeholder	H5提示信息

文本框——text
将<input>标记中的type属性值设置为text，就可以在表单中插入文本框。
密码框——password
将<input>标记中的type属性值设置为password，就可以在表单中插入密码框。
复选框——checkbox
将<input>标记中的type属性设置为checkbox，就可以在表单中插入复选框。
单选按钮——radio
将<input>标记中的type属性设置为radio，就可以在表单中插入一个单选按钮。name的名称相同才能够有单选的效果。
标准按钮——button
将<input>标记中的type属性设置为button，就可以在表单中插入标准按钮。
重置/提交按钮——reset/submit
将<input>标记中的type属性设置为reset，就可以在表单中插入重置按钮。
将<input>标记中的type属性设置为submit，则插入提交按钮。
在HTML文件中，使用列表框标记<select>，同时嵌套列表项标记<option>,可以实现列表框效果，其语法格式如下：
```
<select>
	<option>北京</option>
	<option>上海</option>
	<option>广州</option>
	<option>深圳</option>
</select>
```
有时网页中需要一个多行的文本域，用来输入更多的文字信息，定义文本域的语法格式如下:
```
<textarea rows="5" cols="10">
				
</textarea>
```

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Form表单</title>
	</head>
	<body>
		<form method="post" action="index.php">
			文本框:<input type="text" name="text" />
			<br/>
			密码框:<input type="password" name="pass" />
			<br/>
			文件框:<input type="file" name="file" />
			<br/>
			复选框:篮球<input type="checkbox">足球<input type="checkbox">乒乓球<input type="checkbox">
			<br/>
			<!--name的名称相同才能够有单选的效果-->
			单选框:男<input type="radio" name="ra">女<input type="radio" name="ra">
			<br/>
			普通按钮:<input type="button" value="普通按钮">
			<br/>
			提交按钮:<input type="submit" value="注册">
			<br/>
			列表框：<select>
					<option>北京</option>
					<option>上海</option>
					<option>广州</option>
					<option>深圳</option>
				</select>
			<br/>
			文本域：<textarea rows="5" cols="10">
				
				</textarea>
			<br/>
			文本框：<input type="text" value="请输入！" readonly>
			文本框：<input type="text" value="请输入！" disabled>
			重置按钮:<input type="reset" value="重置">

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