Web前端 | HTML表单form ✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！ 📃个人主页：@每天都要敲代码的个人主页 🔥系列专栏：Web前端 目录 一：表单（重要） 1. form表单初步 2. 用户注册表单的实现 3. 下拉列表支持多选 4. form的其它控件 4.1 file控件 4.2 隐藏域hidden控件 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就是什么！ 
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请求 
3. 下拉列表支持多选 ①使用select时，调用multiple就可以支持多选，没有属性的时候，默认只会显示一条数据；加上multiple属性就会把所有的选项都显示出来！ ②框中显示的条数可以用size来控制！ 注意：多选时，必须要按住ctrl键！ 
4. form的其它控件 4.1 file控件 file控件：文件上传专用 
4.2 隐藏域hidden控件 隐藏域：网页上看不到框，但是表单提交的时候数据会自动提交给服务器！ 
4.3 readonly & disabled ①readonly和disabled相同点：都是只读不能修改。 ②但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交） 
4.4 input控件的maxlength属性 maxlength 设置文本框中可输入的字符数量 
二：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)树上的节点进行增删改的。 三：div和span在网页中的应用 （1）div和span是什么？有什么用？ div和span都可以称为“图层” 图层的作用是为了保证页面可以灵活的布局。 图层就是一个一个的盒子，div嵌套div就是盒子套盒子。 div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。 （2）最早的网页是采用table进行布局的，但是table不灵活，太死板。现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。 （3）div和span的区别？ div独自占用一行（默认情况下） span不会独自占用一行 
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/41270.html
