🎯功能简介
🐳这是一个用户注册的简单网页表单，包括用户名、密码、确认密码、年龄、出生年月、性别、爱好、喜欢的颜色、经常浏览的网站、所在城市、上传照片和备注等信息项。用户可以填写各种个人信息并提交注册。页面还包括了一些基本的样式设计，如字体颜色、背景颜色、边框样式等。用户填写完信息后可以点击注册按钮提交信息，或者点击重填按钮清空已填信息。🥏
🎯代码解析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ margin: auto; border: 1px solid; border-collapse: collapse; } caption{ font-size: 24px; font-weight: bold; color: blue; padding-bottom: 15px; } td{ padding: 6px; border: 1px solid; } tr:nth-child(-n+12){ background-color: #eee; text-indent: 5px; } td:nth-child(2){ background-color: #cff; margin: 5px 10px; } tr:nth-last-child(1){ background-color: #9cf; text-align: center; } tr:nth-child(12){ text-align: center; } span{ font-size: 18px; font-weight: bold; color: red; } input{ width: 250px; height: 20px; border: 1px solid #d4cdba; } input:focus,select:focus,textarea:focus{ background-color: #eef; } input[type="number"]{ width: 50px; } input[type="date"]{ width: 150px; } input[type="radio"],input[type="checkbox"] { height: 15px; width: 15px; } input[type="color"]{ width: 30px; height: 30px; margin: 0px; } select,input[type="file"]{ height: 30px; width: 200px; font-size: 16px; font-weight: 500; border: 2px solid skyblue; } input[type="button"],input[type="submit"],input[type="reset"]{ width: 100px; height: 30px; background: #93b518; margin: 5px 10px; border-radius: 5px; font: bold 18px "黑体"; } </style> </head> <body>
这部分代码定义了一个 HTML 文档的基本结构，包含了一些 CSS 样式定义。其中，<style> 标签中的样式定义了表格、标题、单元格和输入框等的样式。
<form action="f1"> <table> <caption>用户注册</caption> <tr> <td>用户名:</td> <td><input type="text" required autofocus ><span>*</span>(必填项)</td> </tr> <tr> <td>密码:</td> <td><input type="password" required placeholder="密码由6到9位的字母和数字组成"><span>*</span>(必填项)</td> </tr> <tr> <td>确认密码:</td> <td><input type="password" required placeholder="密码由6到9位的字母和数字组成"><span>*</span>(必填项)</td> </tr> <tr> <td>年龄:</td> <td><input type="number" step="1"></td> </tr> <tr> <td>出生年月:</td> <td><input type="date" value="日期"></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="男" id="man" checked> <label for="man">男</label> <input type="radio" name="sex" value="女" id="woman"><label for="woman">女</label> </td> </tr> <tr> <td>爱好:</td> <td> <input type="checkbox" name="hobby" value="音乐" checked id="y"> <label for="y">音乐</label> <input type="checkbox" name="hobby" value="美术" id="m"> <label for="m">美术</label> <input type="checkbox" name="hobby" value="舞蹈" id="w"> <label for="w">舞蹈</label> <input type="checkbox" name="hobby" value="健身" id="j"> <label for="j">健身</label> </td> </tr> <tr> <td>你喜欢的颜色:</td> <td><input type="color" value="black"></td> </tr> <tr> <td>你经常浏览的网站:</td> <td> <input type="url" list="url"> <datalist id="url"> <option value="https://www.haust.edu.cn"></option> <option value="https://www.bilibili.com"></option> <option value="https://www.zhihui.com"></option> </datalist> </td> </tr> <tr> <td>你所在的城市:</td> <td> <select> <option value="--请选择城市--" selected>--请选择城市--</option> <optgroup label="河南省"></optgroup> <option value="洛阳">洛阳</option> <option value="郑州">郑州</option> <option value="商丘">商丘</option> <option value="周口">周口</option> <optgroup label="其他省市"></optgroup> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> </select> </td> </tr> <tr> <td >上传本人照片:</td> <td ><input type="file" multiple></td> </tr> <tr> <td>备注:</td> <td><textarea rows="12" cols="80"></textarea></td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册"> <input type="reset" value="重填"> <input type="button" value="关闭"> </td> </tr> </table> </form>
这部分代码定义了一个表单，并包含了一系列的表单元素。其中的 <input> 标签用于接收用户输入的数据，包括用户名、密码、年龄、出生年月、性别、爱好、颜色、经常浏览的网站和上传照片等。<select> 标签用于选择所在城市，<textarea> 标签用于输入备注信息。最后，三个 <input> 标签分别表示提交表单、重置表单和关闭表单。
🎯核心代码
table{ margin: auto; border: 1px solid; border-collapse: collapse; } caption{ font-size: 24px; font-weight: bold; color: blue; padding-bottom: 15px; } td{ padding: 6px; border: 1px solid; } tr:nth-child(-n+12){ background-color: #eee; text-indent: 5px; } td:nth-child(2){ background-color: #cff; margin: 5px 10px; } tr:nth-last-child(1){ background-color: #9cf; text-align: center; } tr:nth-child(12){ text-align: center; } span{ font-size: 18px; font-weight: bold; color: red; } input{ width: 250px; height: 20px; border: 1px solid #d4cdba; } input:focus,select:focus,textarea:focus{ background-color: #eef; } input[type="number"]{ width: 50px; } input[type="date"]{ width: 150px; } input[type="radio"],input[type="checkbox"] { height: 15px; width: 15px; } input[type="color"]{ width: 30px; height: 30px; margin: 0px; } select,input[type="file"]{ height: 30px; width: 200px; font-size: 16px; font-weight: 500; border: 2px solid skyblue; } input[type="button"],input[type="submit"],input[type="reset"]{ width: 100px; height: 30px; background: #93b518; margin: 5px 10px; border-radius: 5px; font: bold 18px "黑体"; }
🎯效果展示
