⬅️ 返回地图
第 21 话

表单:官方调查

请如实填写以下信息,否则你的请求将被驳回。

1. 身份核验 (Basic Inputs)

要想进入系统,首先得验明正身。<input> 标签是最常用的伪装大师,通过 type 属性变换形态。

🪪 文本 (Text)

最普通的输入框,啥都能填。

<input type="text" placeholder="你的代号">

🔐 密码 (Password)

输入的内容会被掩盖,防止被偷窥。

<input type="password">

📧 邮箱 (Email)

自带验证功能,填错格式会被浏览器拦截。

<input type="email">

� 数字 (Number)

只能填数字,还能限制范围。

<input type="number" min="1" max="100">
2. 审讯选项 (Selection)

有时候,我们不需要用户打字,只需要他们做出选择。

注意:name 必须相同才能互斥!

3. 特种装备 (Advanced Types)

HTML5 带来了一批高科技装备,让表单更加强大。

🎨 取色器 (Color)

type="color"

📅 日期 (Date)

type="date"

🎚️ 滑块 (Range)

type="range"

📂 文件 (File)

type="file"
4. 安全协议 (Attributes)

给你的输入框加上限制,防止用户乱填。

安全官提示:
"不仅要能填,还要填得对!使用这些属性来控制用户的行为。"
属性 (Attribute) 作用 (Function) 示例 (Example)
placeholder 占位符,提示用户该填什么(幽灵文字)。 placeholder="请输入..."
required 必填项!不填不让提交。 required
readonly 只读。能看不能改(档案已归档)。 readonly
disabled 禁用。完全锁死,数据甚至不会被提交。 disabled
value 默认值。一开始就填好的内容。 value="默认值"
min / max 限制数字或日期的范围。 min="1" max="10"
step 规定数字的间隔(步长)。 step="2"
autofocus 页面加载后自动聚焦到此框。 autofocus
pattern 使用正则表达式验证(高级玩法)。 pattern="[A-Za-z]{3}"
5. 终极测试

填好这份表格,你就是合格的特工了!

🕵️ 特工注册表