表单是什么？
1.表单的作用是，接收用户的信息，点击提交按钮提交数据给服务器
2.怎么画一个表单？
使用form标签画表单
3.一个网页当中可以有多个表单
4.表单最终是需要提交数据给服务器的，form标签有个action属性，这个属性用来指定服务器地址：
action属性用来指定数据提交给哪个服务器
action属性和超链接中的href属性一样，都可以向服务器发送请求（request）
5.重点强调有name的一律会提交，如果不想提交不要加name属性，name后面双引号内部的名字可以自己定义
6.如果提交的value没有赋值，其默认值为空字符串“”,会将空字符串提交给服务器
，java代码得到的是 username=""
7.注意：想提交的都是有name的，提交上去的是name 和value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单
</title>
</head>
<body>
<!--需要在action后面添加想要提交服务器的地址-->
<form action="http://www.baidu.com">
<!--画一个提交按钮，这个按钮可以提交表单-->
<!--画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力-->
<input type="text">
<input type="submit" value="提交"> <!--表单发送请求的过程中可以带数据，把上面text文本里的数据一起带走-->
<input type="url">
<!--这是一个普通按钮，不具备提交表单的能力，通过value可以自定义button上显示的文本信息-->
<input type="button" value="按钮显示文本">
</form>
<br><br>
<form action="http://ssdsds">
用户名<input type="text">
密码<input type="password">
<input type="submit" value="提交">
</form>
<br><br>
<!--
表单是以什么格式提交给服务器的
127.0.0.1:8848/html-code/wensd?uesrname=wewe&userpwd=123
必须要加name，不然无法提交
提交格式aciton?name=value&name=value&name=value 这个格式非常重要后期要与java联合在处理数据上有用
有name才能提交
HTTP协议规定的，必须以这种格式提交给服务器
重点强调：表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写那么属性
-->
<form action="wensd">
<table align="center" border="1px">
<tr align="center">
<td>用户名</td>
<td><input type="text" name="uesrname"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd" value=".."></td> <!--如果这两个文本没有加name是无法提交走的,这里的value也可以先写后面会默认显示在文本框-->
<!--所以这里的value不必要自己写，让用户自己去写-->
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登陆">
<input type="reset" value="清空"> <!--reset放在form表单外部无法清空，必须放form表单内部-->
</td>
</tr>
</table>
</form>
</body>
</html>
10.36
用户注册表单的性质
用户注册表有以下一些需求需要去实现
用户名
密码
确认密码
性别
兴趣爱好
学历
简介
通过这些表单，把表单里面的一些组件，都使用到
2.form表单method属性：
get：采用get方式提交的时候，用户提交信息会显示在浏览器的地址栏上
post:采用post方式提交的时候，用户信息不会显示在浏览器的地址栏上
当用户提交的信息中包含有敏感信息，例如:密码，建议采用Post方式提交
method属性不指定，或者指定get,这种情况下都是get。
只有当method属性指定为post的时候才是post请求。
剩下所有的请求都是get请求
这里对比超链接，超链接也是需要向服务器提交信息，但是超链接是一个get方式提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册表单</title>
</head>
<body>
<!--用户注册表单
用户名
密码
确认密码
性别
兴趣爱好
学历
简介
-->
<!--如果表单的method是post，则提交到服务器的内容不现实-->
<form src="sdsdsd" method="post">
用户名<br>
<input type="text" name="usrname">
<br>密码<br>
<input type="password" name = "passwd">
<br>确认密码<br> <!--确认密码与之前密码的比对，前端就可以完成，不需发送到服务器，所以不用加name-->
<input type="password">
<!--当name一样的时候，为同一组，选择了一个就不能选另外一个-->
<!--当性别在提交的时候，我们知道提交给服务器的只有两个，一个是name,一个是value
在text类型里面的value是自己键入的，所以在radio里面的vaule必须要提前赋值，不然
服务器无法区分具体选的是哪一个
-->
<!--checked代表默认选中-->
<br>性别<br>
<input type="radio" name="sex" value="0" checked="checked">男
<input type="radio" name="sex" value="1">女
<!--需要在后面添加对每个复选框的文字提示，checkbox为复选框-->
<!--这里和前面的radio类型一样，value的值要默认给出-->
<!--默认选择还是加 checked-->
<br>兴趣爱好<br>
<input type="checkbox" name="hobby" value="smoke" checked="checked">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="haircut">烫头
<!--这里的默认选择是在后面加 selected-->
<br>学历<br>
<!--selected下拉框-->
<select name="grade">
<option value="gz">高中</option>
<option value="dz" selected>大专</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
</select>
<br>简介<br>
<!--用textarea文本域,通过行row,和列clos来改变文本域的大小-->
<!--textarea没有value属性，在文本框里填写的就是value-->
<textarea rows="10" clos ="60" name="introduce"></textarea>
<br>
<input type="submit" value="注册">
<input type="reset" value="清空">
</form>
</body>
</html>
3.下拉列表支撑多选
首先下拉表单通过<select></select>来定义
支持下拉表单多选的语句
<selelct multiple ="multiple"></select>
size可以增加下拉框里的显示个数
<selelct multiple ="multiple" size = "2"></select>
当用户想要多选的时候，需要按住ctrl键才能够多选。
示意代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉框支持多选</title>
</head>
<body>
<select multiple="multiple" size="2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>3</option>
</select>
</body>
</html>
file控件（点击可以选择文件）
文件上传专用
<html>
<head>
<title></title>
</head>
<body>
<input type = "file"> //点击就可以选择一个文件
</body>
</html>
扫一扫
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
