HTML简单注册界面

最新推荐文章于 2024-08-20 18:26:48 发布

同学！认真听

最新推荐文章于 2024-08-20 18:26:48 发布

阅读量1w

点赞数 13

分类专栏： html

本文链接：https://blog.csdn.net/qq_40690077/article/details/100688183

版权

html 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

## **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 元素内点击文本，就会触发关联的表单控件。注意，一个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>