效果1：
<!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>h2{text-align: center;}form{width: 800px;height: 800px;border: 1px solid red;margin: auto;background: rgb(106, 131, 70);}p{width: 700px;height: 80px;background: white;border-radius: 20px 20px 20px 20px;line-height: 80px;margin: auto;margin-top: 30px;padding-left: 50px;}span{margin-left: 200px;}#b{width: 60px;height: 50px;border: 1px solid rgb(61, 121, 96);background: rgb(61, 121, 96);margin:auto;margin-top: 50px;border-radius: 30px 30px 30px 30px;text-align: center;line-height: 50px;}div > input{background: rgb(61, 121, 96);}</style></head><body><h2>注册表单</h2><form action=""><p>用户昵称：<span><input type="text"></span> </p><p>Email：<span><input type="email" required placeholder="example@domain.com"></span></p><p>工作年龄：<span><input type="range" min="1" max="30"> 30 </span></p><p>年龄：<span><input type="number" required placeholder="your age" min="1" max="20" step="3"></span></p><p>出生日期：<span><input type="date"></span></p><p>个人主页：<span><input type="url"></span></p><div id="b"><input type="button" value="注册"></div></form></body></html>
效果2：
<html><head><meta charset="utf-8"><title>注册表单</title><STYLE type=text/css>* {margin: 0;padding: 0;list-style: none;}body {font-size: 12px;font-family: "Times New Roman", Times, serif;line-height: 1.25;text-align: center;}h1 {font-weight: bold;line-height: 2em;margin: 10px auto;}form {width: 500px;margin: 0 auto;background: #9cbc2c;border-radius: 5px;box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);padding: 4px;}fieldset {padding: 10px;border-style: none;}#regForm ol li {margin-bottom: 12px;background: white;border: 1px solid #f7f7f7;border-radius: 5px;padding: 5px 10px;line-height: 30px;height: 30px;position: relative;}#regForm label {float: left;width: 120px;font: italic 13px/30px Georgia, "Times New Roman", Times, serif;}#regForm button {margin: 5px auto;background: #384313;font: 14px Georgia, "Times New Roman", Times, serif;color: #ffffff;letter-spacing: 1px;text-shadow: 0 1px 1px #000000;border-radius: 14px;border-style: none;padding: 4px 15px;}#regForm ol li:hover {background: #f7f7f7;border-color: #9cbc2c;}</STYLE></head><body><h1>注册表单</h1><form id=regForm onsubmit="return chkForm();" method=post><fieldset><ol><li><label for=username>用户昵称：</label><input id=username name=username type="text" autofocus required></li><li><label for=uemail>Email：</label><input id=uemail type=email name=uemail required placeholder="example@domain.com"></li><li><label for=age>工作年龄：</label><input id=age type=range name=range1 max="60" min="18"><outputonforminput="value=range1.value">30</output></li><li><label for=age2>年龄:</label><input id=age2 type=number required placeholder="your age"></li><li><label for=birthday>出生日期：</label><input id=birthday type=date></li><li><label for=search>个人主页：</label><input id=search type=url required list="searchlist"><datalist id=searchlist><option label="Google" value="http://www.google.com" ><option label="Yahoo" value="http://www.yahoo.com" ><option label="Bing" value="http://www.bing.com" ><option label="Baidu" value="http://www.baidu.com" ></datalist></li><li><select><option>1</option><option>2</option></select></li></ol></fieldset><div><button type=submit>注册</button> </div></form></body></html>
