develop

分支 (2)

管理

管理

master

develop

FontEndBasis
/
HtmlBasis
/
form_demo.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单案例</title>
	</head>
	<body>
		<!--
		    表单标签：
		        * 概念：用于采集用户输入的数据的。用于和服务器进行交互。
				* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
				                * action：指定提交数据的URL
				                  * method:指定提交方式
				                      * 分类：一共7种，2种比较常用
				                         * get：
				                              1. 请求参数会在地址栏中显示。会封装到请求行中
				                              2. 请求参数大小是有限制的。
				                              3. 不太安全。
				                         * post：
				                              2. 请求参数不会再地址栏中显示。会封装在请求体中
				                              2. 请求参数的大小没有限制。
				                              3. 较为安全。

				* 表单项中的数据要想被提交：必须指定其name属性
				* 表单项标签：
					* input：可以通过type属性值，改变元素展示的样式
						* type属性：
							* text：文本输入框，默认值
							* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
							* password：密码输入框
							* radio:单选框
								* 注意：
									1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
									2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
									3. checked属性，可以指定默认值
							* checkbox：复选框
								* 注意：
									1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
									2. checked属性，可以指定默认值
					        * file：文件选择框
						    * hidden：隐藏域，用于提交一些信息。
						    * 按钮：
							* submit：提交按钮。可以提交表单
							* button：普通按钮
							* image：图片提交按钮
								* src属性指定图片的路径

					* label：指定输入项的文字描述信息
						* 注意：
						   * label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
					* select: 下拉列表
						* 子元素：option，指定列表项

					* textarea：文本域
						* cols：指定列数，每一行有多少个字符
						* rows：默认多少行。

		-->
		<form method="get"  action="http://127.0.0.1/yxhis">
			<input type="text"   placeholder="登录名" name="username"  /><br />
			<input type="password" placeholder="密码" name="password" /><br />

			<input type="submit" />
		</form>
		<!--input-->
		<hr color="crimson" />
		<form method="get" action="http://127.0.0.1/yxhis">
			姓别: 男:<input type="radio" name="sex" value="男" />
			女:<input type="radio" name="sex" value="女" /><br />
			爱好:科幻:<input type="checkbox" name="hobby" value="科幻" />
			     文学:<input type="checkbox" name="hobby" value="文学" /><br />
			<input type="submit" />
		</form>

	</body>
</html>