表单在 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 />
密 码:<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、密码框
密码框:效果录入信息不可见
密 码:<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" />
效果展示