注意: require:必填项 placeholder 。
代码显示:
<form action="JR01.html" method="post"> <!-- get跳转地址时地址后面显示表单后面的内容 --> <table > <tr> <td>用户名</td> <td> <input type="text" value="默认值" name="username"> <input type="email"> <input type="month"> <input type="color"> <input type="time"> </td> </tr> <tr> <td>密 码</td> <td> <input type="password" name="userpwd" placeholder="请输入密码"required pattern="/a/"> </td> </tr> <tr> <td>性 别</td> <td> <input type="radio"name="sex" value="1">男 <input type="radio" name="sex" value="2">女 </td> </tr> <tr> <td>爱 好</td> <td> <input type="checkbox"name="hobby" value="1">唱歌 <input type="checkbox" name="hobby" value="2">看书 </td> </tr> <tr> <td colspan="2"> <input type="reset"value="清空" > <input type="submit" value="注册"> <input type="button" value="普通按钮"><!--没有特殊功能--> </td> </tr> <tr> <td>城 市</td> <td> <select name="city"> <option value=""烟台>烟台</option> <option>青岛</option> <option>大连</option> <option>北京</option> </select> </td> </tr> <tr> <td>头 像</td> <td> <input type="file"> </td> </tr> <tr> <td>协 议</td> <td> <textarea cols="10"rows="5"> </textarea> <!--多行文本区域--> </td> </tr> </table> </form> <form action="JR02.html" method="post"> <table> <tr> <td> 用户名<input type="text" name="username"> </td> </tr> <tr> <td> 密 码<input type="password" name="userpwd"> </td> </tr> <tr> <td> 性别 <input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="2">女 </td> </tr> <tr> <td> 爱好 <input type="checkbox" name="hobby" value="1">运动 <input type="checkbox" name="hobby" value="2">聊天 <input type="checkbox" name="hobby"value="3">玩游戏 </td> </tr> <tr> <td> 出生日期: <input type="text" name="birth">年 <select> <option>选择月份</option> <option>1月</option> <option>2月</option> <option>3月</option> <option>4月</option> <option>5月</option> <option>6月</option> <option>7月</option> <option>8月</option> <option>9月</option> <option>10月</option> <option>11月</option> <option>12月</option> </select>月 <input type="text" name="day">日 </td> </tr> <tr> <td> <input type="file" > <input type="button" value="浏览"> </td> <tr> <td> <h4>阅读协议</h4> <textarea cols="15" row="5">欢迎阅读服务条款协议</textarea> </td> </tr> <tr> <td> 同意以上协议<input type="checkbox"> </td> </tr> <tr> <td> <input type="submit" value="注册"> <input type="reset" value="重填"> </td> </tr> </table> </form>邮件email 类 表单外框<fieldest> <legend></legend> <fieldest> <form> <fieldset style="border: 1px solid red"> <legend>基本信息</legend> <table> <tr> <td>姓名</td> <td><input type="text" pattern="/a/"placeholder="请输入姓名"></td> </tr> <tr> <td colspan="2"> <input type="submit"name="提交"></td> </tr> </table> </fieldset> </form> 具体实例: </form> <form action="JR02.html" method="post"> <h2> <span style="color: orange" >合作</span>意向表 </h2> <p> <span style="color: orange" >我们在收到您的需求后,会在第一时间与您取得联系</span> </p> <table> <tr> <td>公司名称:</td> <td><input type="text" name="company"></td> </tr> <tr> <td>姓名:</td> <td><input type="text"name="name"></td> </tr> <tr> <td>电话:</td> <td><input type="text" name="telphone"></td> </tr> <tr> <td> <p> <span style="color: orange" >您需要的服务</span> </p> </td> </tr> <tr> <td> <input type="checkbox" value="1"> 网站建设与传播 </td> <td> <input type="checkbox" value="2">电子商务</td> </tr> <tr> <td > <input type="checkbox" value="3"> 数字化展馆 </td> <td> <input type="checkbox" value="4"> 多媒体互动 </td> </tr> <tr> <td > <input type="checkbox" value="2"> 软件服务 </td> <td> <input type="checkbox" value="2"> 移动开发</td> </td> </tr> </table> </form>