HTML简单注册界⾯## **HTML5实现登录界⾯**
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<table border="1">
<tr>
<td>⽤户名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>性别：</td>
<td>
<label>男<input type="radio" name="sex"/></label>
<label>⼥ <input type="radio" name="sex"/></label>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<label>篮球<input type="checkbox"/></label>
<label>⾜球<input type="checkbox"/></label>
<label>⽻⽑球<input type="checkbox"/></label>
</td>
<td></td>
</tr>
<tr>
<td>来⾃哪个城市</td>
<td>
<select>
<option value="宁津">宁津</option>
<option value="天津">天津</option>
<option value="北京">北京</option>
</select>
</td>
</tr>
<tr>
<td>⼤头照</td>
// accept详细写法： accept = "image/png,image/jpg,image/gif"
<td><input type = "file" accept="image/*,"  value = "选择⽂件" /></td>  </tr>
<tr>
<td>⾃我介绍</td>
<td><textarea></textarea></td>
</tr>
<tr >
<td><input type="submit"  vaule = "提交数据"/> </td>
<td><input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
input:⽂本输⼊框
标签标签的详细解释
⽤户名密码< input type =
“text” />
⽂本框：text表⽰可以输⼊⽂本
性别：
< input type =
“radio” /> 、label标
签
单选按钮：在 HTML 表单中，radio表⽰单选按钮， < input type = “radio” /> 每出现⼀次，⼀个 Radio 对象就会
被创建。label标签和特定表单控件关联之后，如果⽤户在 label 元素内点击⽂本，就会触发关联的表单控件。注意，⼀
html radio点击变颜个label只能关联⼀个表单控件。（通俗来说，就是选择性别时，点击⽂字就可以选中该选项）
爱好：
< input
type=“checkbox”/ >
多选按钮：可以选择多项
来⾃哪个城市：
< select >< option
value=“宁津”>宁津<
/option >< /select >
下拉菜单：⼀个option代表⼀个下拉菜单选择项
⼤头照
< input type = “file”
accept=“image/*,”
value = “选择⽂件” />
上传⽂件：file代表上传⽂件，可以⽤value设置上传按钮的值，上传按钮默认会显⽰“未选择⽂件”；通过改变accept
中的值改变上传⽂件的类型，*代表这⼀类型的所有格式，⽐如image有jpg、gif、png等。audio：录⾳、image：图像、
video：视频
⾃我介绍：< textarea ><
/textarea >
多⾏⽂本：可以输⼊多⾏⽂本
重置：< input type=“reset”
value=“重置” />
重置：重置的前提是将重置的部分⽤form表单包起来
提交数据：
< input
type=“submit” vaule
= “提交数据”/>
提交数据：将所有数据判断并提交
语法：< input type=“元素类型名称”/ >常⽤的元素类型type:
text：单⾏⽂本框 (⽤户名)
textarea：多⾏⽂本框
password：密码⽂本框
submit：提交按钮
image：图⽚按钮
reset：重置按钮，重设表单内容。button：普通按钮
hidden：隐藏元素
checkbox：复选框
file:⽂件域
select：列表框
补充：
层级关系显⽰
<select>
<optgroup label="⼭西省">
<option value="1">太原 </option>
<option value="2">平遥</option>
</optgroup>
<optgroup label="河北省">
<option value="1">⽯家庄</option>
<option value="2">邯郸</option>
</optgroup>
</select>
placeholder、required、pattern、value：
< input type="text"
required="required"
placeholder="⽤户名不能为空"
value = "aaa"
pattern="[A-Za-z]{3}"/>
required表⽰此⽂本框是必填项，否则⽆法提交。
placeholder占位⽂本，在输⼊框给⽤户提⽰。
value表⽰⽂本框的默认值，当有默认之后placeholder则不显⽰
pattern表⽰输⼊内容组成，"[A-Za-z]{3}"(正则表达式)表⽰由A到Z,a到z的三位字母组成。type = color|time|date|email|number
<form action="#">
<span>颜⾊：</span>
<input type="color" name="color" id="color"/>
<br />
<span>时间：</span>
<input type="time" name="time" id="time" />
<br />
<span>⽇期：</span>
<input type="date" name="date" id="date" />
<br />
<!-- 邮箱，提供了默认的邮箱完整验证，必须包含@ -->
<span>邮箱：</span>
<input type="email" name='email' id="email" />
<br />
<span>电话：</span>
<input type="tel" name="tel"/>
<br />
<span>数字：</span>
<!--
min：限定数字的最⼩值
max：限定数字的最⼤值
-->
<input type="number" min="0" max="5" />
<br />
<input type="submit" />
</form>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。