前端：完整简单详细的注册页面讲解

完整且简单的注册页面的讲解和代码等

程序员Fy

3834人浏览 · 2022-06-29 15:09:03

程序员Fy · 2022-06-29 15:09:03 发布

成品总效果如下：

在这里插入图片描述
需要其他修饰网页可以加入自己的创意

讲解：

不知道基础语法的宝可以看看我先前发的一些内容
注意点：
1，密码需要用type="password"属性，使密码不会被显示。如下：

密  码<input type="password" name="password"><br><br>

2，光标最开始默认定位在用户名框（autofocus定位）。如下：

用户名<input type="text" name="username" autofocus><br><br>

3，性别选择是单选，type="radio"属性用于单选，name="gender"属性用于区分同一个类别，value可以不要。如下：

请选择你的性别：<input type="radio" value="nan" name="gender">男
<input type="radio" value="nv" name="gender">女<br><br>

4，爱好设置属于多选，type="checkbox"属性用于多选，name="hobby"属性用于区分同一个类别，可以和上面的name="gender"属性区别开来如下：

请选择你的爱好：<input type="checkbox" value="duo" name="hobby">足球
			<input type="checkbox" value="duo" name="hobby">篮球
			<input type="checkbox" value="duo" name="hobby">LOL
			<input type="checkbox" value="duo" name="hobby">韩剧
			<input type="checkbox" value="duo" name="hobby">王者荣耀

5，邮箱设置，type="email"属性专门用于设置邮箱类型，placeholder="请输入你的邮箱"属性用于文本框里的提示，required属性是设置不能为空，当邮箱这一项不填时不能提交，如下：

邮箱：<input type="email" placeholder="请输入你的邮箱" required><br><br>

6，用户头像，type="file"属性就可以了，如下：

用户头像:<input type="file"><br><br>

7，家庭住址栏选项，需要在select标签里面嵌套一个option标签，option标签里面写需要填的地址选项，如下：

家庭住址:
		<select>
			<option>西安</option>
			<option>永川</option>
			<option>万州</option>
		</select><br><br>

8，收获地址栏选项，同样的需要在select标签里面嵌套一个option标签，option标签里面写需要填的地址选项。multiple="multiple"属性是不将选项折叠起来，上一个没有写这个属性就折叠了。selected="selected"属性是默认选择属性，disabled属性是不能更改的选项，可以用于在这里作为提示。

你的收获地址是:
		<select multiple="multiple" >
			<option disabled>你的收获地址是:</option>
			<option selected="selected">西安</option>
			<option>永川</option>
			<option>万州</option>
		</select><br><br>

9，大文本框，textarea标签用于写大文本的标签，如建议反馈等。如下：

<textarea cols="20" rows="10">
			建议或者意见
</textarea><br>

10，颜色选择项，type="color"属性就可以了，专门可以选择颜色。

你喜欢的颜色：<input type="color">

11，注册时间，type="datetime-local"属性用于选择日期的属性

注册时间：<input type="datetime-local"><br>

12，重置和注册按钮，type="submit"属性专门用于提交，type=“reset"属性专门用于重置的按钮。value=”"属性用于提示。

<input type="submit" value="注册">
<input type="reset" value="重置">

然后就OK了，个别属性没有介绍到可以看看以前发的内容。

源代码：

喜欢点一个赞吧，3Q~

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form align="center" action="123.html" method="post">
		用户名<input type="text" name="username" autofocus><br><br>
		密  码<input type="password" name="password"><br><br>
		请选择你的性别：<input type="radio" value="nan" name="gender">男
			<input type="radio" value="nv" name="gender">女<br><br>
		请选择你的爱好：<input type="checkbox" value="duo" name="hobby">足球
		<input type="checkbox" value="duo" name="hobby">篮球
		<input type="checkbox" value="duo" name="hobby">LOL
		<input type="checkbox" value="duo" name="hobby">韩剧
		<input type="checkbox" value="duo" name="hobby">王者荣耀
		邮箱：<input type="email" placeholder="请输入你的邮箱" required><br><br>
		用户头像:<input type="file"><br><br>
		家庭住址:
		<select>
			<option>西安</option>
			<option>永川</option>
			<option>万州</option>
		</select><br><br>
		你的收获地址是:
		<select multiple="multiple" >
			<option disabled>你的收获地址是:</option>
			<option selected="selected">西安</option>
			<option>永川</option>
			<option>万州</option>
		</select><br><br>
		<textarea cols="20" rows="10">
			建议或者意见
		</textarea><br>

		你喜欢的颜色：<input type="color">
		注册时间：<input type="datetime-local"><br>
		<input type="submit" value="注册">
		<input type="reset" value="重置">
		</form>
</body>
</html>