模拟QQ注册练习HTML5的表单form

最新推荐文章于 2025-05-31 16:40:53 发布

「已注销」

最新推荐文章于 2025-05-31 16:40:53 发布

阅读量4.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：心情+心得文章标签：第一篇前端博客

本文链接：https://blog.youkuaiyun.com/Young_chao0228/article/details/79357530

这篇博客是作者的第一篇前端学习心得，主要介绍了通过模拟QQ注册页面练习HTML5的表单form。作者讨论了表单的action、method属性，解释了GET和POST方法的区别，并展示了简单的CSS样式应用，最终呈现了模拟注册页面的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

考完研，成绩出来的那一刻万念俱灰，大半年的勤勤恳恳，从上学开始就再也没有这么认真过了，从八月份辞掉AS400开发的工作，毅然踏上了考研路，每天埋头在书堆中，前所未有的辛苦，前所未有的充实。期间也认识了一群视学习为食物的志同道合的小伙伴。但结果总是不尽如人意，过了国家线，过不了学校线。于是郁闷了好久，决定重新踏上开发的路，而对前端比较感兴趣，于是大过年的，不看春晚，看书，看代码。不聚会，和前端相会。看视频，敲代码，看博客写心得。日子好像有点奔头了。

闲言叙完，说正事。作为自己的的第一个前端练习，表单作为前端学习的一大板块，也是用户和页面交互的一个类别。参照着QQ注册页面进行了练习。

---------------------------------------------------------------------------------------------------------------------------------

上代码，先写页面上半部分，现在前端页面基本都是以简洁为主，越简单，越舒服，但该有的应有尽有，主题凸显，听起来简单，实际上代码层实现起来是需要东一番脑筋的。

<!-- 头部 -->
	<div class="weclome">
	<h1>欢迎注册QQ</h1>
	<br>
	<h2>每一天，乐在沟通&nbsp;&nbsp;&nbsp;&nbsp;<span><a href="#" id="freenumber">免费靓号</a></span></h2>
	</div>
	<hr>

然后就是form表单了，action表示当表但中的submit按钮被点击时，该表单信息要被提交到哪个地址。method表示用何种方法提交该表单，方法有两个 POST 和 GET 方法，这里将两种方法也做一个比较：

GET：GET（默认值，如果不指定method方法时）请求会把表单数据显示地放在URL中，对长度和数据编码有所限制（传送的数据量较小，一般不大于2KB，但执行效率比post好）。get请求会将请求的参数名和值转换成字符串，并附加在URL之后，因此在地址栏可以看到请