Html简单表单---新用户注册界面

最新推荐文章于 2024-06-11 11:33:55 发布

翊木

最新推荐文章于 2024-06-11 11:33:55 发布

阅读量9.3k

点赞数 21

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/Xiaojia_guniang/article/details/107730969

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
 input[type='radio']{
	width: 50px;
	height: 10px;
	font-size: 10px; 
 }
</style>
</head>
<body>
<table><!-- 表格标签 -->
<form>
<h1>新用户注册</h1>
	<hr><!-- 分界线 -->
	<br><!-- 换行 -->
	<tr>
		<td>姓名:</td>
		<td><input type="text" name="username" value="名字"></td>
	</tr>
	<tr>
		<td>密码:</td>
		<td><input type="password" name="pwl" ></td>
	</tr>
	<tr>
		<td>性别:</td>
		<td>男<input type="radio" name="sex" >
		女<input type="radio" name="sex" ></td>
	</tr>
	<tr>
		<td>爱好:</td>
		<td>篮球<input type="checkbox" name="hobby" >
		足球<input type="checkbox" name="hobby" >
		乒乓球<input type="checkbox" name="hobby" ></td>
	</tr>
	<tr>
		<td>籍贯:</td>
		<td><select>
			<option selected="selected">郑州</option>
			<option>北京</option>
			<option>上海</option>
			<option>深圳</option>
			<option>火星</option>
		</select></td>
	</tr>
	<tr>
		<td>上传头像:</td>
		<td><input type="file"></td>
	</tr>
	<tr>
		<td>备注:</td>
		<td><textarea rows="10" cols="50">默认值
		</textarea></td>
	</tr>
	<tr>
		<td>隐藏按钮<input type="hidden"></td>
	</tr>
	<tr>
		<td>按钮:</td>
		<td><input type="button" value="button">
		<input type="submit" value="提交">
		<input type="reset" value="重置"></td>
	</tr>
</form>
</table>
</body>
</html>

在这里插入图片描述

在性别/爱好的input添加checked=“checked” 属性,默认选择男性或某爱好

同理: 在<option 添加selected=“selected”,选定下拉列表的默认选项
字体,颜色,加粗(一般用css设置调整,并不在html中直接设置,只做简单了解)

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<font color="rel" face="黑体" size="7">我爱学习</font><br>
<font color="green" face="宋体" size="6">我爱学习</font><br>
<font color="pink" face="楷体" size="5">我爱<strong></strong>学习</font><br>
<font color="pink" face="黑体" size="5">我爱<strong></strong>学习</font><br>
<font color="black" face="宋体" size="4">我爱学习</font><br>
<font color="blue" face="黑体" size="3">我爱学习</font><br>
<font color="purple" face="楷体" size="2">我爱学习</font><br>
<font color="rel" face="楷体" size="1">我爱学习</font><br>
</body>
</html>

在这里插入图片描述

表格合并

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<font size="7">
<!-- 这是一个注释:有序列表  orderlist  展示爱好-->
<table border="2px" width="400px" align="center">
	<tr align="center"> <td>1-1</td> <td colspan="2">1-2</td> </tr>
	<tr align="center"> <td>2-1</td> <td rowspan="2">2-2</td> <td>2-3</td> </tr>
	<tr align="center"> <td>3-1</td> <td>3-2</td> </tr>
</table>
</font>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body{
		background-color: #D3D3D3;
		text-align: center;
	}
	p,input{
		color:#808080;
	}
	div{
		width: 600px;
		height: 1300px;
		border-radius: 5px;
		margin: 50px auto;
	}
	div  div{
		width: 300px;
		height: 300px;
		background-color:white;
		border: 25px solid white;
	}
	input{
		width: 250px;
		height: 30px;
	}
	#i1{
		width: 260px;
		height: 40px;
		background-color: #DC143C;
		color: white;
	}
	#p1{
		color: red;
	}
</style>
</head>
<body>
<div align="center">
<div align="center">
	<img src="logo.png" alt="XX学校" width="180" height="40">
	<p>XX系统</p>
	<p><input type="text" value="请输入用户名"></p>
	<p><input type="text" value="请输入密码"></p>
	<p id="p1">可能出现的错误信息</p>
	<input id="i1" type="submit" value="登录">
</div>
</div>
</body>
</html>

在这里插入图片描述

-Bootstrap
在官网下载框架代码https://v3.bootcss.com/
引入bootstrap文件

<link href="../bootstrap-3.3.7-dist/css/bootstrap.css" 
		rel="stylesheet"
		type="text/css">

在这里插入图片描述
找到自己想要的模板,复制粘贴就可以了

用户注册合法性的判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            height: 20px;
        }
        #s2{
            background-image: url(./1.jpg);
            background-repeat: no-repeat;
            background-size: 20px;
        }
    </style>
</head>
<body>
    用户名:<input id="i1" type="text">&nbsp&nbsp&nbsp<label id="s2"></label><span id="s1"></span>
</body>
    <!-- 
        1.输入框
        2绑定失去焦点时,校验输入框数据
        3.当失去焦点时,校验输入框数据
        4.如果数据符合规则,后面显示 成功提示
        5.如果数据不符合规则,后面显示不成功提示
     -->
     <script>
        var i1 = document.getElementById("i1");
        var s1 = document.getElementById("s1");
        var reg = /^[a-zA-Z]+[a-a-zA-Z0-9_]{5,9}$/;
        i1.onblur = function(){
            var i1val = i1.value;
            if(i1.value.length!=0){
                if(reg.test(i1val)){
                    s2.innerHTML="";
                    s1.style.display="inline";
                    s1.innerHTML="用户名可以使用(^_^)/*";
                    s1.style.color="green";
                }else{
                    s2.innerHTML="&nbsp&nbsp&nbsp&nbsp&nbsp";
                    s1.style.display="inline";
                    s1.innerHTML="用户名格式不正确呀~(*^*)";
                    s1.style.color="red";
                }
            }else{
                s2.innerHTML="";
                s1.style.display="inline";
                s1.innerHTML="用户名不可以为空哦(*^*)";
                s1.style.color="red";
            }
        }
        //将后面的成功提示隐藏
        i1.onfocus = function(){
                //s1.innerHTML="";将原来写的内容覆盖为空
                s1.style.display="none";
                s2.innerHTML="";
        }
    </script>
</html>