<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>
- css
<!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">   <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="     ";
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>