add HTML/CSS/JS daily challenge for web department

This commit is contained in:
Pjc
2026-09-10 22:58:30 +08:00
commit a664c18d1b
15 changed files with 910 additions and 0 deletions
+64
View File
@@ -0,0 +1,64 @@
# Day_2 · HTML 表单与输入控件
> 预计耗时:20~30 分钟
> 网页要能"填":登录、注册、搜索都靠表单。今天认识最常用的输入控件。
## 今日知识点
- 表单容器 `<form>`
- 输入框 `<input type="text">`、密码 `type="password"`、单选 `type="radio"`、多选 `type="checkbox"`
- 按钮 `<button>`、下拉框 `<select>` + `<option>`、多行文本 `<textarea>`
## 先学(教程)
- 菜鸟教程 HTML(看"HTML 表单"):https://www.runoob.com/html/html-forms.html
- MDN·你的第一个表单:https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Your_first_form
- B站视频(黑马程序员,看讲"表单、input/select/textarea"的几集,选看):https://www.bilibili.com/video/BV14J4114768/
## 任务(后做)
新建 `signup.html`,做一个简单的**报名表单**,包含:
1. 姓名(text)、密码(password)
2. 性别(radio 两个,`name` 相同才能单选)
3. 意向方向(select 下拉:前端 / 后端)
4. 一个提交按钮(button)
> 提示:`name` 属性是给输入框"起名字",表单提交时用来区分不同字段(比如 `name="gender"` 表示这是性别那一项)。
## 完成标准
- [ ] 表单能显示并填写
- [ ] radio 能单选
- [ ] 用了 input / select / button
**提交方式**:把 `signup.html` 代码贴在当日工单评论里。
## 参考解答(先做再看)
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>报名</title>
</head>
<body>
<form>
<p>姓名:<input type="text" name="name"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>性别:
<label><input type="radio" name="gender" value="男">男</label>
<label><input type="radio" name="gender" value="女">女</label>
</p>
<p>方向:
<select name="direction">
<option value="frontend">前端</option>
<option value="backend">后端</option>
</select>
</p>
<button type="submit">提交</button>
</form>
</body>
</html>
```