小白也能懂！我的第一个HTML表单练习碎碎念

原创已于 2026-04-26 16:12:28 修改 · 53 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2026-04-22 00:52:31 首次发布

作为刚学前端的新手，表单这东西说难不难，说简单吧细节还挺多的。今天就拿我写的这个“kun的独家登陆页”，唠唠表单入门那点事儿~

一、先晒一下我的“凑活能用”的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
</head>
<body>
    <h1>kun的独家网页登陆</h1>
    姓名：<input name="账号" type="text"value="请输入您的账号"><br>
    密码：<input name="密码" type="bassword"value="请输入您的密码"><br>
    kun爱好：<br>
    <input name="坤的爱好" type="radio" value="唱歌">唱歌
    <input name="坤的爱好" type="radio" value="作曲">作曲
    <input name="坤的爱好" type="radio" value="滑冰">滑冰<br>
    kun喜欢的颜色：<br>
    <input name="颜色" type="checkbox" value="蓝色" >蓝色
    <input name="颜色" type="checkbox" value="金色" >金色
    <input name="颜色" type="checkbox" value="彩色" >彩色<br>
    超话截图：<input name="选择文件" type="file"><br>
    <input name="提交登录" type="submit">
    <input name="重置表单" type="reset">
</body>
</html>

展示效果：

二、这些控件到底是干啥的？大白话讲清楚

文本框&密码框：就是让用户打字的地方呗。文本框输入账号啥的，明明白白；密码框就是打码的，适合藏小秘密~
单选框：只能选一个！就像选kun的爱好，唱歌、作曲、滑冰三选一，选了一个另一个就自动取消了，关键是 name 得一样，不然就变成多选了。
复选框：可以随便选！kun喜欢的颜色，蓝色金色彩色，全选也没人管你，主打一个自由。
文件上传：让用户传图片/文件用的，比如我这里传超话截图，浏览器会自动弹出文件选择窗口。

三、写的时候踩的小坑&小技巧

一开始忘了加 <form> 标签，结果发现点提交啥反应都没有，后来才知道所有表单控件都得放这个“大盒子”里。
单选框的 name 属性一定要一样！不然会变成三个都能选的bug，白折腾半天。
提示文字别用 value ，用 placeholder ！ value 会变成用户提交的内容，而 placeholder 只是个灰色提示，用户一打字就消失，更实用。
想点文字也能选单选/复选？套个 <label> 标签就行，体验直接拉满，不然只能点那个小圈，用户体验太差了。

四、碎碎念收尾

表单这东西看着简单，其实是网页交互的基础，登录、注册、评论全靠它。我这个练习虽然简陋，但把核心逻辑都摸到了，接下来打算给它加点CSS，整个好看的样式，不然原生的表单实在太丑了哈哈。

对了，有没有同是前端新手的小伙伴，一起唠唠学习进度？

标签

#html #前端