HTML表单

最新推荐文章于 2022-05-25 12:39:33 发布

逆夏*光年

最新推荐文章于 2022-05-25 12:39:33 发布

阅读量133

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Mmaoi/article/details/107628770

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

概念：

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

注意：

* form:用于定义表单，可以定义一个范围内，范围代表采集用户数据范围
       * 属性：2种
       * action:指定数据提交的URL
       * method:指定数据提交的方法
get:1.请求参数会在地址栏中显示，会封装在请求栏中
2.请求参数大小有限制
3.不安全
   post:1.请求参数不会在地址栏中显示，会封装在请求栏中
2.请求参数大小无限制
3.比较安全
       * 表单项各种数据想要提交：必须要指定name属性

表单使用表单标签 <form> 来设置:

<form>
.
input elements
.
</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

类型	描述
<radio>	单选框
<checkbox>	复选框
<password>	定义密码字段
<text>	定义文本
<hidden>	隐藏域
<image>	输入图片

HTML 表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<select>	定义了下拉选项列表
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<submit>	定义一个点击按钮

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table align="center">
			<tr>
				<td>
					<form action="#" method="post">
						
						<label for="username">用户名：</label><input id="username" type="text" name="username" placeholder="请输入密码!">
					  <br/>
						
						
				密码：<input typut="password"name="pwd">
					  <br/>
				
				
				性别：<input type="radio" name="gender" value="male">男
					 <input type="radio" name="gender" value="fmale">女
					  <br/>
				爱好：<input type="checkbox" name="hoddy" value="running">跑步
					  <input type="checkbox" name="hoddy" value="sing">唱歌
					  <input type="checkbox" name="hoddy" value="reading">阅读
					  <br/>
					  
					  
				图片：<input type="file" name="file">
					  <br/>
				
				隐藏域：<input type="hidden" name="mmz" value="123">
						<br/>
				
				省份：	<select>
							<option value=""></option>
							<option value="1">贵州</option>
							<option value="2">北京</option>
							<option value="3">上海</option>
						</select>
						<br/>
			
						
						<input type="submit" value="登录"><br/>
						<input type="button" value="登录"><br/>
						<input type="submit" value="登录"><br/>
						<input type="image" src="2.jpg">
					</form>
				</td>
			</tr>
		</table>
	</body>
</html>