0930-作业
1. 写一个会员注册的完成表单(只需要html部分,只需要提交关键代码即可),重点在于掌握控件元素与常用属性上
知识点
表单与控件元素
1. 表单简介
- 表单分为表单元素与控件元素二部分
- 表单元素仅一个:
<form> - 表单控件元素,根据类型不同,有多个
2.1 常用属性
| 序号 |
属性 |
描述 |
| 1 |
action |
表单提交的 URL 地址(处理表单请求的脚本) |
| 2 |
method |
表单提交类型:GET/POST |
| 3 |
enctype |
设置表单提交数据的编码方式 |
| 4 |
name |
表单唯一名称,与 ID 同义 |
| 5 |
target |
打开请求 URL 的方式,如果_blank |
2.1 请求类型method
- web 请求方式有二种: 超链接与表单提交
- 超链接就是使用
<a>标签发起请求,其实就是GET请求 GET: 默认提交类型,表单数据以查询字符串形式附加到 URL 上POST: 请求内容在请求体中- 请求类型属性
action的取值
| 序号 |
允许值 |
描述 |
| 1 |
GET |
默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K |
| 2 |
POST |
表单数据放在请求体中发送,数据量更大也更安全 |
2.3 编码方式enctype
| 序号 |
允许值 |
适用场景 |
描述 |
| 1 |
application/x-www-form-urlencoded |
key=value |
默认值,使用 URL 编码,GET/POST 均适合 |
| 2 |
multipart/form-data |
文件上传 |
采用二进制流处理,会把文件域中的内容封装到请求参数中,适合大文件 |
| 3 |
text/plain |
电子邮件 |
如action="mailto:URL |
2.4 表单名称name
| 序号 |
功能 |
描述 |
| 1 |
标识表单元素 |
与id一样,用来唯一标识该表单元素 |
| 2 |
绑定表单元素 |
用于表单控件元素的 form 属性,用来绑定所属表单 |
| 3 |
访问表单元素 |
快捷访问内部控件元素,如form.input.value |
2.5 打开方式target
| 序号 |
允许值 |
描述 |
| 1 |
_self |
默认值,当前窗口打开提交的 URL |
| 2 |
_blank |
新窗口打开提交的 URL |
| 3 |
_parent |
父窗口打开提交的 URL |
| 4 |
_top |
顶层窗口打开提交的 URL |
3.1 常用属性
| 序号 |
属性 |
描述 |
| 1 |
type |
控件类型,如文本框, 复选框… |
| 2 |
name |
请求参数的名称,对应于脚本处理的变量名 |
| 3 |
value |
请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效 |
| 4 |
form |
控件所属表单 |
| 5 |
placeholder |
仅限输入框text和password,输入框的提示信息 |
| 6 |
list |
仅限输入框text和password,下拉框智能提示 |
| 7 |
autocomplate |
仅限输入框text和password,自动完成(历史记录) |
| 8 |
maxlength |
仅限输入框text/password, 允许输入最大字符数量 |
| 9 |
checked |
仅限单选框radio, 复选框checkbox(布尔属性) |
| 10 |
readonly |
元素只读,但通过 JavaScript 可修改(布尔属性) |
| 11 |
disabled |
元素禁用,(布尔属性) |
| 12 |
autofocus |
自动获取焦点,一个表单仅限一个控件 |
| 13 |
src |
仅限图像域images, 图像 URL 地址 |
| 14 |
width |
仅限图像域images, 图像宽度 |
| 15 |
height |
仅限图像域images, 图像高度 |
3.2 type类型
| 序号 |
类型 |
描述 |
| 1 |
<input type="text"> |
单行文本框 (默认值) |
| 2 |
<input type="password"> |
密码输入框 |
| 3 |
<input type="radio"> |
单选框 |
| 4 |
<input type="checkbox"> |
复选框 |
| 5 |
<input type="image"> |
图像域/提交表单 |
| 6 |
<input type="file"> |
文件上传域 |
| 7 |
<input type="hidden"> |
隐藏域(仅以服务端可见) |
| 序号 |
类型 |
描述 |
| 1 |
<input type="email"> |
电子邮件 |
| 2 |
<input type="data"> |
日期 |
| 2 |
<input type="data"> |
日期 |
| 4 |
<input type="datetime-local"> |
本地日期时间 |
| 5 |
<input type="tel"> |
电话号码 |
| 6 |
<input type="url"> |
URL 地址 |
| 7 |
<input type="number"> |
数值 |
| 8 |
<input type="range"> |
范围拖动条 |
| 9 |
<input type="search"> |
搜索框/移动 |
| 10 |
<input type="color"> |
拾色器 |
3.3 常用事件属性
| 序号 |
事件属性 |
描述 |
| 1 |
onfocus |
获取焦点时触发 |
| 2 |
onblur |
失去焦点时触发 |
| 3 |
onchange |
失去焦点,且值发生变化时触发 |
| 4 |
oninput |
值发生变化(不等失去焦点)时触发 |
| 5 |
onkeydown |
按下键盘时触发 |
| 6 |
onkeyup |
抬起键盘时触发 |
| 7 |
onclick |
鼠标单击时触发 |
| 8 |
onselect |
选择内容文本时触发 |
作业
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户注册</title> <style> body { display: grid; grid-template-columns: 60px 180px; place-content: center; row-gap: 10px; } h3, form, button { grid-column: span 2; } h3 { text-align: center; } </style></head><body> <h3 class="title">用户注册</h3> <br> <form action="check.php" method="POST" class="register" enctype="multipart/form-data"> <label for="username">账号：</label> <input type="text" id="username" name="username" value="" placeholder="请输入用户名，至少6位字母或数字。" autofocus required onblur="isEmpty(this)" /> <br> <label for="pwd1">密码:</label> <input type="password" id="pwd1" name="pwd1" value="" placeholder="至少6位且包含数字和字母" required onblur="isEmpty(this)" /> <br> <label for="pwd2">确认密码:</label> <input type="password" id="pwd2" name="pwd2" value="" placeholder="*********" required onblur="isEqual(this)" /> <br> <label for="secret">性别:</label> <!-- 男, 女,保密 --> <div> <!-- 单选按钮要确保返回值唯一,所以name属性必须相同 --> <!-- 要设置一个checked,使得一个value属性做为返回值 --> <input type="radio" name="gender" id="male" value="male" /><label for="male">男</label> <input type="radio" name="gender" id="female" value="female" /><label for="female">女</label> <!-- checked:设置默认选择 --> <input type="radio" name="gender" id="secret" value="secret" checked /><label for="secret">保密</label> </div> <br> <label for="#">兴趣:（可多选）</label> <div> <!-- 复选框变量名通常使用数组的格式 --> <!-- 要设置一个value属性,做为返回值 --> <input type="checkbox" name="hobby[]" id="game" value="game" checked /><label for="game">游戏</label> <input type="checkbox" name="hobby[]" id="shoot" value="shoot" /><label for="shoot">摄影</label> <input type="checkbox" name="hobby[]" id="travel" value="travel" /><label for="travel">旅游</label> <input type="checkbox" name="hobby[]" id="program" value="program" checked /><label for="program">编程</label> </div> <br> <label for="edu">学历:</label> <!-- <select name="edu" id="" size="9" multiple属性可多选> --> <select name="edu" id="edu"> <option value="1">初中</option> <option value="2">高中</option> <option value="3" selected>专科</option> <option value="4">本科</option> <option value="5">硕士</option> <!-- label属性优先级大于option中的文本 --> <option value="6" label="博士">自学</option> </select> <br> <!-- 上传文件:form, method 必须是 POST, enctype="multipart/form-data" --> <label for="user-pic">照片:</label> <!-- 隐藏域 --> <!-- value值是字节大小表示 --> <input type="hidden" name="MAX_FILE_SIZE" value="80000" /> <input type="file" name="user_pic" id="user-pic" /> <!-- 头像在这里显示的占位符 --> <div class="user-pic" style="grid-column: 2"></div> <label for="user-resume">个人简历:</label> <input type="hidden" name="MAX_FILE_SIZE" value="100000" /> <input type="file" name="resume" id="user-resume" /> <!-- 头像在这里显示的占位符 --> <div class="user-resume" style="grid-column: 2"></div> <br> <label for="comment">备注:</label> <!-- 文本域就是一个多行的文本框 --> <textarea name="comment" id="comment" cols="40" rows="10" placeholder="不能超过200字" oninput="show(this)" onselect="this.style.color='red'" ></textarea> <span class="tips">还能输入 <em>20</em>个字。</span> <br> <button type="reset" form="register">重置</button> <button form="register">确定</button> </form></body></html>
