Web前端 | HTML表单form
✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！
📃个人主页：@每天都要敲代码的个人主页
🔥系列专栏：Web前端
目录
一：表单（重要）
1. form表单初步
2. 用户注册表单的实现
3. 下拉列表支持多选
4. form的其它控件
4.1 file控件
4.3 readonly & disabled
4.4 input控件的maxlength属性
二：HTML中元素的id属性
三：div和span在网页中的应用
一：表单（重要）
1. form表单初步
（1）表单有什么用？
收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
（2）怎么画一个表单？使用form标签画表单。
（3）一个网页当中可以有多个表单form。
（4）表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：
①action属性用来指定数据提交给哪个服务器。
②action属性和超链接中的href属性一样；都可以向服务器发送请求（request）。
（5）在表单form里面，可以使用input输入域的type属性，画各种各样的按钮：
button 普通按钮
reset 重置按钮
text 文本框
password 密码框
checkbox 复选框
radio 单选按钮
submit 提交按钮，具有提交表单的能力
（6）对于按钮来说，按钮的value属性，value属性用来指定按钮上显示的文本信息
（7）表单项写了name属性的，一律会提交给服务器。不想提交，就不要写name属性
例如：提交后结果http://localhost:8080/oa/login?username=123&password=456
格式：action?name=value&name=value&name=value&name=value&name=value...
W3C的HTTP协议规定的，必须以这种格式提交给服务器。
（8）http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
（9）当name没有写的时候，该项不会提交给服务器。
当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。java代码得到的是：String username = ""
总结：文本框和密码框的value不需要程序员指定，用户输入什么value就是什么！
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单form</title></head><body>
<!--1.各种按钮--> <form action="http://192.168.111.3:8080/oa/save"><!--普通按钮，并指定values属性--><input type="button" value="button按钮"/> <br><!--提交按钮,可以把表单当中的数据提交带走--><input type="submit" value="登录"/> <br><!--清除按钮--><input type="reset" value="清除"/> <br><!--文本框--><input type="text"/> <br><!--密码框--><input type="password"/> <br><!--复选框--><input type="checkbox"/> <br><!--单选按钮--><input type="radio"/> </form><hr color="red"><!--2.value属性--> <!--这个按钮和普通的超链接没什么太大的区别。（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据。）--><form action="http://ww.baidu.com"><input type="text"/><input type="submit" value="百度"/></form><hr color="red"><!--3.制作一个登录清除按钮界面--> <form action="http://localhost:8080/oa/login">用户名：<input type="text" /> <br>密码： <input type="text" /> <br><input type="submit" value="登录"> <input type="reset" value="清除"> <br></form><hr color="red"><!--4.把这个登录清除按钮界面放到表格里--> <!---也可以把上面的按钮放到表格的当中--> <br><br><form action="http://localhost:8080/oa/login"><table border="1px"><tr><td>用户名：</td><!--5.设置name属性，才会把写的用户密码提交走--><!--提交后结果：http://localhost:8080/oa/login?username=123&password=456--><td><input type="text" name="username" /> </td></tr><tr><td>密码：</td><!--用户在框里里填入的内容，就是value的值--><td><input type="text" name="password" /></td></tr><tr><td><input type="submit" value="登录"> </td><td><input type="reset" value="清除"> </td></tr> </table></form> </body>
</html>
2. 用户注册表单的实现
（1）form表单method属性：
get：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交！默认使用的是get方式提交！
（2）单选框和复选框：要求name属性相同，这样才能保证在同一组！
（3）下拉列表：使用<select name><option value></select></option>联合使用，添加selected属性可以选择默认选项
（4）文本域：使用<textarea></textarea>根本没有value属性；可以使用rows和cols属性调文本框的大小
（5）超链接实际上也可以提交数据给服务器，但是提交的数据都是固定不变的。并且链接是get请求，不是post请求
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册表单的实现</title></head><body> <!--method属性,post表示用户提交的信息不会显示在浏览器地址栏上--><form action="http://localhost:8080/jd/register" method="post">用户名<input type="text" name="username" /><br>密码<input type="password" name="userpwd" /><br>确认密码 <!--确认密码不需要上传到服务器，用js判断--><input type="password"/><br>性别<!--name都写成sex，表示同一组，这样就能保证二者只能二选一--><!--单选按钮的value必须手动指定--><!--加上checked表示默认勾选的选项是男--><input type="radio" name="sex" value="1" checked/>男<input type="radio" name="sex" value="0" />女<br>兴趣爱好<input type="checkbox" name="interest" value="music"/>听音乐<input type="checkbox" name="interest" value="baskeball"/>打篮球<input type="checkbox" name="interest" value="fishing"/>钓鱼<br>学历<!--使用selected表示默认选中--><select name="grade"><option value ="gz">高中</option><option value ="dz">大专</option><option value ="bk" selected>本科</option><option value ="ss">硕士</option></select><br>简介<!--文本域--><!--文本域根本就没有value属性--><textarea rows="10" cols="60" name="introduce"></textarea><br><!--提交和清除--><input type="submit" value="注册" ><input type="reset" value="清除"> </form><!--超链接也可以提交数据给服务器，但是提交的数据都是固定不变的。--><!--超链接是get请求。不是post请求。--><a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a></body>
</html>
3. 下拉列表支持多选
①使用select时，调用multiple就可以支持多选，没有属性的时候，默认只会显示一条数据；加上multiple属性就会把所有的选项都显示出来！
②框中显示的条数可以用size来控制！
注意：多选时，必须要按住ctrl键！
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>下拉列表支持多选</title></head><body>学历 <!--不使用multiple属性，只能选一项--><select name="grade"><option value ="cz">初中</option><option value ="gz">高中</option><option value ="dz">大专</option><option value ="bk">本科</option><option value ="ss">硕士</option> </select> <!-- multiple="multiple" 支持多选的 size设置显示条目数量-->学历<!--使用multiple属性，可以选择多项，按住ctrl键选择--><select name="grade" multiple="multiple"><option value ="cz">初中</option><option value ="gz">高中</option><option value ="dz">大专</option><option value ="bk">本科</option><option value ="ss">硕士</option> </select> 学历<!--增加size属性，让框中显示出来两个数据--><select name="grade" multiple="multiple" size="2"><option value ="cz">初中</option><option value ="gz">高中</option><option value ="dz">大专</option><option value ="bk">本科</option><option value ="ss">硕士</option> </select> </body>
</html>
4. form的其它控件
4.1 file控件
file控件：文件上传专用
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>file控件</title></head><body><!--文件上传专用--><input type="file"></body>
</html>
4.2 隐藏域hidden控件
隐藏域：网页上看不到框，但是表单提交的时候数据会自动提交给服务器！
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>hidden控件</title></head><body><form action="http://localhost:8080/oa/save"><input type="hidden" name="username" value="111" />用户密码<input type="text" name="userpwd" /><input type="submit" value="提交" /></form></body>
</html>
4.3 readonly & disabled
①readonly和disabled相同点：都是只读不能修改。
②但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>readonly和disabled</title></head><body><form action="http://localhost:8080/oa/save">用户代码<input type="text" name="usercode" value="111" readonly /> <br>用户姓名<input type="text" name="username" value="张三" disabled /><!--提交--><input type="submit" name="提交" /></form></body>
</html>
4.4 input控件的maxlength属性
maxlength 设置文本框中可输入的字符数量
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>maxlength属性</title></head><body>用户名<input type="text" maxlength="3"></body>
</html>
二：HTML中元素的id属性
（1）在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
（2）注意：表单提交数据的时候，只和name有关系，和id无关。
（3）id有什么用？
javascript语言：可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们获取元素（节点）更方便。
（4）HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
javascript主要就是对这棵DOM(Document)树上的节点进行增删改的。
<!DOCTYPE html>
<html id="myhtml"><head id="myhead"><meta charset="utf-8"><title>HTML中元素的id属性</title></head><!--任何元素都有id属性--><body id="mybody"><form id="myform"><input type="text" id="username" name="username"/><input type="password" id="userpwd" name="userpwd"/></form></body>
</html>
三：div和span在网页中的应用
（1）div和span是什么？有什么用？
div和span都可以称为“图层”
图层的作用是为了保证页面可以灵活的布局。
图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
（2）最早的网页是采用table进行布局的，但是table不灵活，太死板。现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
（3）div和span的区别？
div独自占用一行（默认情况下）
span不会独自占用一行
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML中的div和span</title></head><body><div id="div1">我是一个DIV</div><div id="div2">我是一个DIV</div><span id="span1">我是一个SPAN标签</span><span id="span2">我是一个SPAN标签</span><div id="div3"><div><div>test</div></div></div></body>
</html>
