那些酷炫的网页你也可以做到——第六篇（表单标签）

灰太狼 2022-11-15 14:19 147阅读 0赞

前情回顾（不断复习）：  
[HTML第一篇][HTML]  
[HTML第二篇][HTML 1]  
[HTML第三篇][HTML 2]  
[HTML第四篇][HTML 3]  
[HTML第五篇][HTML 4]

## 表单标签 ##

> 我们每天都在使用QQ，那你知道QQ这个登录界面是怎么实现的吗？今天就教你做一个登录界面。![这里是引用][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70]

表单标签：
    <form> </form> ：封装表单标签的范围
    action：action属性。表示表单要提交的地址（提交到后台，servlet）。
    method：method属性。表示表单提交方式,有get和post两种属性

get和post的区别：  
1、get方式进行提交时，参数列表内容以明文形式显示到地址栏上。  
post方式提交时，封装到请求体中，（请求体属于http协议部分的内容），不会显示在地址栏中。这种方式比较安全  
2、get方式提交时，安全级别比较低。  
post方式提交，安全级别比较高。  
3、get方式提交时，对参数列表的数据大小有限制。地址栏大小是一定的。默认是1KB。  
post方式提交时， 对大数据没有限制。支持大数据的传输。

<input>	：用户输入项的内容
    属性：1.name  名称（必须指定）
    2.value  值
    type：属性值的不同，显示不同的输入框
    例如： type="text"		：普通的文本框
    	   type="password"	：密码框，非明文的

普通文本框一般就是我们的用户名，用户名输入的时候别人是可以看到的，我们的密码一般不会让别人看见，所以密码的输入框选择非明文的，保护我们的隐私。![在这里插入图片描述][20210401222709335.png]

type="radio"	：单选按钮。
    checked：默认值。只要在radio上出现了checked属性，就默认是被选中的。
    type="checkbox"	：多选按钮
    type="file"：文件上传
    type="hidden"	：隐藏组件。用户不需要看不到的数据，使用该该组件隐藏起来。
    type="button"	：按钮
    type="submit"	：提交。默认显示“提交查询”。
    表单收集用户数据，点击后就可以把表单数据提交到后台。
    type="reset"	：重置。默认显示“重置”。恢复到最初的状态。

单选按钮就比如在性别的选择上你只能选择男性或者女性，多选按钮就用在兴趣爱好，你可以爱好篮球也可以爱好游戏。  
![在这里插入图片描述][20210401222924493.png]

文件的上传就例如我们平时用的各种软件中的文件上传。  
![在这里插入图片描述][20210401223122945.png]

<select> </select>	：选择下拉框。
    name		：name属性必须指定，并且指定在select标签上。
    
     <option> </option>	：
     value	：value属性必须指定，并且指定在option标签上
     selected	：默认值属性。例如：selected="selected"
     		
     <textarea></textarea>：文本域。可以写入多行多列的内容
    			rows：行数。
    			cols：列数。

选择下拉框就像图中的样子，可以选择不同的城市，文本域就好比是我们平时填写调查问卷最后的那部分主观问题，需要你自己填上文字。  
![在这里插入图片描述][20210401223235726.png]

下面看一个完整的实例，具体的了解一下上面的知识点

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70 1]  
学完了今天的知识，是不感觉做出来的网页更有成就感了，不要放弃，继续学习，做更好的自己。

[HTML]: https://blog.csdn.net/qq_46285118/article/details/115176857?spm=1001.2014.3001.5501
[HTML 1]: https://blog.csdn.net/qq_46285118/article/details/115251891?spm=1001.2014.3001.5501
[HTML 2]: https://blog.csdn.net/qq_46285118/article/details/115267571?spm=1001.2014.3001.5501
[HTML 3]: https://blog.csdn.net/qq_46285118/article/details/115285415?spm=1001.2014.3001.5501
[HTML 4]: https://blog.csdn.net/qq_46285118/article/details/115381662?spm=1001.2014.3001.5502
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70]: /images/20221022/a15c0787386b41cebe56e93536c2ae4c.png
[20210401222709335.png]: /images/20221022/b540f81832524e1e88a52b21ac5ab484.png
[20210401222924493.png]: /images/20221022/841d5102ca594bfd9b8ddd29eed08986.png
[20210401223122945.png]: /images/20221022/305b07181ce049778e69a40facb79d93.png
[20210401223235726.png]: /images/20221022/87be8f672b75445c954c549c4dd5fe51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70 1]: /images/20221022/a8a3a5df22cd45d4a1fa1976f360966a.png