<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第三个页面</title> <style> textarea:required{ background-color: lightyellow; } body{ font-family: "微软雅黑"; max-width: :600px; padding: 0px 30px; } h1{ margin-top: 0px; } p{ margin-top: 0px; } fieldset{ margin-bottom: 15px; padding: 10px; } legend{ padding: 0px 3px; font-weight: bold; font-variant: small-caps; } label{ width: 110px; display: inline-block; vertical-align: top; margin: 6px; } em{ font-weight:bold ; font-style: normal; color: blue; } input:focus{ background: #FFFFE0; } input,textarea{ width: 250px; } textarea{ height: 10; } input [type=checkbox]{ width: 10px; } input [type=radio]{ width: 10px; } input [type=submit]{ width: 150px; padding: 10px; } </style> <script type="text/javascript" language="JavaScript"> function validataCom(input){ if(input.value.length < 20){ input.setCustomValidity("请您再输入一些信息"); }else{ input.setCustomValidity(""); } } function mySubmit() { alert("填写正确"); } </script> </head> <body> <h1>个人信息</h1> <form action="#" onsubmit="mySubmit()" method="post"> <p></p> <fieldset> <legend>Contact Details</legend> <label>姓名</label><em>*</em><!--显示文本不可编辑--> <input id="name" type="text" value="" placeholder="请输入姓名" required="required" autofocus="autofocus" /><br/> <label>Tel </label> <input id="tel" type="tel"" value="" placeholder="请输入电话" /><br/> <label>邮箱 </label> <input id="email" type="email" required="required" value="" placeholder="请输入邮件地址"> </fieldset> <fieldset> <legend>Personal Information</legend> <label>生日 </label> <input id="birthday" type="date" required="required" /><br/> <label>年龄 </label> <input id="age" type="number" min="1" max="120" step="1" required="required" /><br/> <label>性别 </label> <input id="rm" type="radio" name="gender" value="男"/>男 <input id="rw" type="radio" name="gender" value="女"/>女 <!--<select id="sex"> <option>---请选择性别---</option> <option value="male">-------男-------</option> <option value="female">-------女-------</option> </select>--> <br/> <label>编辑</label><br/> <textarea id="conments" rows="8" cols="23" oninput="validataCom(this)" required="required" > </textarea> </fieldset> <fieldset> <legend>请输入您喜欢的动物</legend> <input id="c1" type="checkbox" /> 斑马 <input id="c2" type="checkbox" /> 老虎 <input id="c3" type="checkbox" /> 狮子 <input id="c4" type="checkbox" /> 大象 </fieldset> <p> <input type="submit" value="提交" /> </p> </form> </body> </html>