例图如下:
1.提示要写内容
2.可以选择日期,颜色等
代码如下:
- <!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>
- table {
- background-color: rgb(168, 200, 196);
- opacity: 0.7;
- }
- </style>
- </head>
- <body>
- <form action="">
- <table width="600" border="1">
- <tr>
- <td colspan="2" style="text-align: center; font-weight: 700;">个人信息</td>
- </tr>
- <td>姓名:</td>
- <td><input type="text" required="required" autofocus="autofocus" autocomplete="off"></td>
- </tr>
- <tr>
- <td>性别:</td>
- <td>
- <input type="radio" name="sex" id="nan"><label for="nan">男 </label>
- <input type="radio" name="sex" id="nv"><label for="nv">女 </label>
- </td>
- </tr>
- <tr>
- <td>生日</td>
- <td>
- <input type="date" required="required">
- </td>
- </tr>
- <tr>
- <td>手机号</td>
- <td>
- <input type="tel" required="required">
- </td>
- </tr>
- <tr>
- <td>民族</td>
- <td>
- <select value="请选择....." required="required">
- <option checked="checked">汉族</option>
- <option>蒙古族</option>
- <option>回族</option>
- <option>藏族</option>
- <option>苗族</option>
- <option>满族</option>
- <option>壮族</option>
- <option>朝鲜族</option>
- <option>其他</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>地区</td>
- <td>
- <input type="text" required="required">
- </td>
- </tr>
- <tr>
- <td>爱好</td>
- <td>
- <input type="checkbox">爬山<input type="checkbox">唱歌<input type="checkbox">跳舞<input
- type="checkbox">台球<input type="checkbox">游戏<input type="checkbox">其他
- </td>
- </tr>
- <tr>
- <td>喜欢颜色</td>
- <td>
- <input type="color">
- </td>
- </tr>
- <tr>
- <td>日志</td>
- <td>
- <textarea name="jieshao" id="" cols="30" rows="10"
- style="resize: none;text-indent: 2em;"></textarea>
- </td>
- </tr>
- <tr>
- <td>免费注册</td>
- <td><input type="submit" value="提交" style="margin-left:200px;"></td>
- </tr>
- <tr>
- <td></td>
- <td><input type="reset" value="重新填写" style="margin-left:190px;"></td>
- </tr>
- </table>
- </form>
- </body>
- </html>