刚开始学前端的时候照着视频写了一个比较简单的注册页面,只有html, 还没有用到css。
效果图 (为以防运行失败,加背景的语句不在代码里)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<form action="#" method="get" name="zc">
<h2>用户注册表</h2>
<hr/>
<p>用户名:<input type="text" size="20" maxlength="10" name="username" required placeholder="请输入6-10位英文字符" pattern="^[A-Za-z]{6,10}$" />(必须填写,必须是6-10位英文)</p>
<p>密码:<input type="password" size="20" maxlength="10" name="userpassword" pattern="^\d{8,10}$ required"/>(必须填写,必须是8-10位数字)</p>
<p>性别:<input type="radio" name="userxb" id="male" value="男" /><label for="male">男 </label>
<input type="radio" name="userxb" id="female"
value="女" /><label for="fema le">女</label>(必须填写)</p>
<p>年龄:<input type="number" name="userage" size="20" max="100" min="1" required/>(必须填写)</p>
<p>上传头像:<input type="file" name="userfile" required/>(必须填写)</p>
<p>电子邮箱:<input type="email" name="userem" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"
placeholder="例如:1655428@qq" required />(必须填写,邮箱含有@和.)</p>
<p>手机号码:<input type="tel" name="usertel" required pattern="^[1]+\d{10}$"/>(必须填写,必须以1开头,11位数字)</p>
<p> 爱好:<input type="checkbox" name="userhob" id="sw" value="上网" />上网
<input type="checkbox" name="userhob" id="ly" value="旅游" />旅游
<input type="checkbox" name="userhob" id="ymq" value="羽毛球" />羽毛球(必须填写)
</p>
<p>上传时间:<input type="date" name="userdata" required />(必须填写) </p>
<p>专业:<input type="text" list="zy">
<datalist id="zy">
<option>请选择专业</option>
<option>NET开发</option>
<option>计算机应用</option>
<option>移动开发</option>
</datalist>(必须填写)</p>
<p>网址:<input id="url" list="urlList">
<datalist id="urlList">
<option value="www.baidu">百度</option>
<option value="www.sina">新浪</option>
<option value="www.itcast">传智</option>
</datalist>
</p>
<p>评论:<textarea name="userpl" rows="6" cols="60" required ></textarea>(必须填写)</p>
<p> <button " type="submit">登录</button></p>
</form>
</body>
</html>
更多推荐
HTML 简单的前端登录注册页面
发布评论