表单
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：
- 表单标签：包括了处理表单数据的形式及数据提交到服务器的地址等。
- 表单输入：包括了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
- 表单按钮：包括提交按钮、复位按钮和一般按钮等。
form
form 为表单标签，定义表单,其主要包含 Action 和 Method 属性。
- Action 用于指定提交到服务器上的URL
- Method 用于指定提交方式，一般为 POST
<form action="action_page.php" method="POST">
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
input
input 为输入元素，根据其 type 属性不同，其输入的形态不一样：
常用属性：
| 属性 | 描述 |
|---|---|
| type | 输入类型 |
| name | 输入名称 |
| value | 输入值 |
| placeholder | 预显示字段 |
| disabled | 是否被禁用 |
| readonly | 是否自读 |
| required | 是否必填 |
常用 type 类型有
- text 文本输入
- number 数字输入
- passport 密码输入
- radio 单选
- checkbox 多选
- color 颜色输入
- email 邮箱输入
- range 范围输入
- date 日期输入
- submit 提交
- hidden 隐藏
- reset 重设
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<form>
<div><input type="text" name="name" placeholder="文本输入"></div>
<div><input type="number" name="number" placeholder="数字输入"></div>
<div><input type="passport" name="passport" placeholder="密码输入"></div>
<div><input type="radio" name="radio" value="1" >单选<input type="radio" name="radio" value="1" >单选</div>
<div><input type="checkbox" name="checkbox" value="1" >多选<input type="checkbox" name="checkbox" value="1" >多选</div>
<div><input type="color" name="color"></div>
<div><input type="range" name="range"></div>
<div><input type="date" name="date"></div>
<div><input type="reset" name="reset" value="重设"></div>
<div><input type="submit" name="submit" value="提交"></div>
</form>
</body>
</html>
训练
尝试书写一个简易的调查问卷表单，调差内容包含
- 姓名
- 年龄
- 性别
- 出生日期
- 邮箱
- 对鸡翅的喜爱程度
- 喜欢吃的食物
- 酱油鸡翅
- 麦辣鸡翅
- 椒盐鸡翅
- 茄汁鸡翅
- 重新设置
- 提交