✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！
📃个人主页：@每天都要敲代码的个人主页
🔥系列专栏：Web前端
目录
一：表单（重要）
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>
隐藏域：网页上看不到框，但是表单提交的时候数据会自动提交给服务器！
<!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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/128458.html
