form表单常用类型
| 类型 | 描述 | 示例 |
|---|---|---|
| text | 文本框 | <input type="text"> |
| password | 暗文文本框 | <input type="password"> |
| 有验证的邮箱表单 | <input type="email"> |
|
| number | 数字文本框，只能输入数字 | <input type="number"> |
| date | 年月日的数字滚轮 | <input type="date"> |
| radio | 单选框 | <input type="radio"> |
| checkbox | 复选框 | <input type="checkbox"> |
| image | 图形化 submit 按钮 | <input type="image"> |
下拉列表
select元素用来创建下拉列表</select><select> 元素中的 <option> 标签定义了列表中的可用选项。
示例
<div><select><option value="0" required disabled>--请选择--</option><option value="1">唱</option><option value="2">跳</option><option value="3">Rap</option><option value="4" selected>篮球</option></select></div>
form表单常用属性
| 类型 | 描述 | 示例 |
|---|---|---|
| name | 控件名称，作为键值对的一部分与表单一同提交 | name="password" |
| value | 控件的初始值 | value="18" |
| max | 最大值 | max="2023-03-13" |
| min | 最小值 | min="1997-05-08" |
| maxlength | value的最小长度(字符数) | maxlength="18" |
| minlength | value的最小长度(字符数) | minlength="18" |
| size | 控件的尺寸 | size="18" |
| selected | 预先选定该选项。 | selected |
| placeholder | 出现在控件上的文字 | placeholder="请填写用户名" |
| chenked | 控件是否选中 | chenked |
| required | 布尔值。如果存在，这个值是必需的 | required |
| disabled | 布尔值。表单控件是否禁用 | disabled |
ps
radio单选按钮允许在多个拥有相同 name 值的选项中选中其中一个。
<div><label for="sex">性别:<input type="radio" name="gender" value="sex" id="sex" />男<input type="radio" name="gender" value="sex" id="sex" />女<input type="radio" checked name="secrecy" value="sex" id="sex" />保密</label></div>
checkbox复选框需要返回多个值，需要在name属性中加[]。
<!-- 复选框 --><div><label for="hobby">爱好:</label><label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>唱</label><label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>跳</label><label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>Rap</label><label for="hobby"><input checked type="checkbox" value="hobby" name="hobby[]" id="hobby"/>篮球</label></div>
用户注册表实例
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><form action="0313.php" method="post"><fieldset><legend style="text-align: center">用户注册</legend><!-- 文本框 --><div><label for="usname">账户:<input type="text" placeholder="不少于6位数" name="usname" id="usname" maxlength="12"/></label></div><!-- 暗文文本框 --><div><label for="password">密码:<input type="password" placeholder="输入密码" name="password" id="password" minlength="8"/></label></div><!-- 邮箱表单 --><div><label for="email">邮箱:<input type="email" placeholder="注意邮箱格式@" name="email" id="email"/></label></div><!-- 数字 --><div><label for="age">年龄:<input type="number" name="age" id="age" value="18" min="18" max="20"></label></div><!-- 日期 --><div><label for="birthday"><input type="date" name="birthday" id="birthday" value="1997-05-08" min="1997-05-08" max="2023-03-13"></label></div><!-- 单选框 --><!-- check = "chcked"表示默认选择，应用于单选和复选 --><!-- name需统一才可以单选，唯一选项--><div><label for="sex">性别:<input type="radio" name="gender" value="sex" id="sex" />男<input type="radio" name="gender" value="sex" id="sex" />女<input type="radio" checked name="secrecy" value="sex" id="sex" />保密</label></div><!-- 复选框 --><div><label for="hobby">爱好:</label><label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>唱</label><label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>跳</label><label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>Rap</label><label for="hobby"><input checked type="checkbox" value="hobby" name="hobby[]" id="hobby"/>篮球</label></div><!-- 下拉框 --><div><select><option value="0" required disabled>--请选择--</option><option value="1">唱</option><option value="2">跳</option><option value="3">Rap</option><option value="4" selected>篮球</option></select></div><!-- 多行文本框 --><div><label for="">个人简介:<br><textarea name="" id="" cols="30" rows="7" placeholder="老师好，我是练习时长两年半的个人练习生ikun。喜欢唱、跳、rap、篮球。"></textarea></label></div><!-- 图片 --><div><label for="picture"><input type="image" src="./0313image/1.png" alt="同意" width="220px" id="picture" onclick="alert('密码输入正确')"></label></div><div><button>提交</button><input type="reset" value="重置"></div></fieldset></form></body></html>
