html5之form表单

表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

【1】action属性

地址栏信息：
http://127.0.0.1:8020/form%E8%A1%A8%E5%8D%95%E7%BB%83%E4%B9%A0/aaa?username=kb&pwd=123456

?：之前是提交的资源的目标地址（http://127.0.0.1:8020/form%E8%A1%A8%E5%8D%95%E7%BB%83%E4%B9%A0/aaa）
?：之后是提交的具体的数据（username=kb&pwd=123456）
http：信息交互遵照协议 http协议
127.0.0.1：代表本机的IP地址
8020：Hbuilder内置服务器的端口号
Form%E8%A1%A8%E5%8D%95：指的是你的项目名字：Form表单
PS：浏览器的地址栏是不支持中文的，都会转成编码传送，如果你在地址栏看到中文，只是当前的那个浏览器给你一个友好的显示
PS:可以使用在线解析工具查看：urlencode
aaa:目标资源 –》去当前项目下找aaa了

?后的内容：
username=kb&pwd=123456
我们写的文本框，密码框等必须要加入一个属性：name;
然后name属性和具体录入的信息会拼成一个键值对的形式
多个键值对之间，用&符号进行拼接
PS：只有放在form表单中的内容才会被收集并提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form表单</title>
	</head>
	<body>
		<form action="aaa" method="get">
			用户名：<input type="text" name="username" value="" /><br />
			密&emsp;码：<input  type="password" name="pwd" value=""/><br />
			<input type="submit" value="登录"/>
		</form>
	</body>
</html>

【2】method属性：

默认情况下不写method属性的时候就相当于method=“get”
get方式：提交数据可见，不安全，提交数据长度有限制，效率高
post方式：提交数据不可见，安全，提交数据长度没有限制，效率低

【3】表单元素

一、input

input标签使用很广泛，通过type属性的不同值，来表现不同的形态。
1、type=“text” 文本框，里面文字可见
表单元素必须有一个属性：name 有了name才可以提交数据,才可以采集数据
然后提交的时候会以键值对的形式拼到一起。
value:就是文本框中的具体内容
键值对：name=value的形式

2、如果value提前写好，那么默认效果就是value中内容。

3、一般默认提示语：用placeholder属性，不会用value–》value只是文本框中的值。

用户名:<input type="text" name="username1" value="" placeholder="请输入用户名"/>

效果展示：

4、readonly只读：只是不能修改，但是其他操作都可以，可以正常提交
写法：
readonly=“readonly”
readonly
readonly = “true”

用户名:<input type="text" name="username" value="zilv" readonly="true"/>

效果展示：

5、disabled禁用：完全不用，不能正常提交

用户名:<input type="text" name="username2" value="" disabled="disabled"/>

效果展示：

6、密码框
密码框:效果录入信息不可见

密&emsp;码:<input type="password" name="pwd" value=""/>

7、单选按钮
注意：一组单选按钮，必须通过name属性来控制，让它们在一个分组中，然后在一个分组里只能选择一个
正常状态下，提交数据为：gender=on ，后台不能区分你提交的数据
不同的选项的value值要控制为不同，这样后台接收就可以区分了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get">
			<input type="radio" name="gender" id="gender" value="1" />男
			<input type="radio" name="gender" id="gender" value="2" />女
			<br />
			<br />
			<input type="submit" value="登录"/>
		</form>
	</body>
</html>

8、多选按钮
必须通过name属性来控制，让它们在一个分组中，然后在一个分组里可以选择多个
不同的选项的value值要控制为不同，这样后台接收就可以区分了
多个选项提交的时候，键值对用&符号进行拼接
默认选中：checked="checked"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get">
			
			<input type="checkbox" name="kemu" value="1" />python
			<input type="checkbox" name="kemu" value="2" />java
			<input type="checkbox" name="kemu" value="3" />jmeter
			<input type="checkbox" name="kemu" value="4" />linux
			<br />
			<br />
			<input type="submit" value="登录"/>
			
		</form>
	</body>
</html>

9、文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get">
			<input type="file" name="file"/>
		</form>
	</body>
</html>

效果展示：

10、隐藏域

<input type="hidden" name="username" value="123456"/>

11、普通按钮

<input type="button" value="普通按钮"/>

12、重置按钮

<input type="reset" value="重置" />

13、下拉列表
默认选中：selected=“selected”
多选：multiple=”multiple”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get">
			我最喜欢的城市：
			<br />
			<select name="city" multiple="multiple">
				<option value="0">--请选择--</option>
				<option value="1">长沙</option>
				<option value="2" selected="selected">济南</option>
				<option value="3">武汉</option>
				<option value="4">北京</option>
			</select>
			<br />
			<br />
			<input type="submit" value="登录"/>
		</form>
	</body>
</html>

效果展示

14、多行文本框

<textarea style="resize: none;" rows="10" cols="30">这里输入信息</textarea>

效果展示

15、label标签
一般会在想要获得焦点的标签上加入一个id属性，然后label中的for属性跟id配合使用。

<label id="user"> 用户名：<input type="username" name="user" id="user" value="" /></label>

效果展示

16、提交按钮

具备提交功能

<input type="submit" />

【4】HTML新增type类型

<input type="email" name="email" id="email" value="" />

效果展示

url:<input type="url" name="url" id="url" value="" />

效果展示

<input type="color" />

<input type="number" min="1" max="10" step="3" value="4"/>

1<input type="range" min="1" max="10" name="range" step="3"/>10

<input type="date" />

<input type="month" />

<input type="week" />

【5】HTML新增属性

multiple：多选
placehoder:默认提示
autofocus:自动获取焦点
required:必填项

用户名：<input type="text" autofocus="autofocus" />

效果展示

用户名：<input type="text" required="required" />

效果展示

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/123455.html

html5之form表单

【1】action属性

【2】method属性：

【3】表单元素

一、input

【4】HTML新增type类型

【5】HTML新增属性

相关推荐

发表回复