首页HTML完成一个唯美博客利用表单嵌套（包含信息姓名：钱进会班级:2202物联网学号202220052）

HTML完成一个唯美博客利用表单嵌套（包含信息姓名：钱进会班级:2202物联网学号202220052）

时间: 2024-12-19 20:23:10 浏览: 7

HTML可以用来创建美观的博客，嵌套表单是一个很好的方式来收集用户的输入。下面是一个简单的例子，展示了如何创建一个包含姓名、班级和学号字段的表单，以展示用户"钱进会"的信息： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>唯美博客 - 钱进会同学信息</title> <style> .blog-form { width: 400px; margin: auto; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } label { display: block; margin-bottom: 5px; } input[type="text"], select { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; outline: none; } </style> </head> <body> <div class="blog-form"> <h2>个人信息</h2> <form> <label for="name">姓名:</label> <input type="text" id="name" name="name" placeholder="请输入姓名" value="钱进会"><br><br> <label for="class">班级:</label> <select id="class" name="class" required> <option value="">请选择班级</option> <option value="2202物联网">2202物联网</option> </select><br><br> <label for="student-id">学号:</label> <input type="text" id="student-id" name="student-id" placeholder="例如：202220052" required pattern="[0-9]{6}"><br><br>  <button type="submit">提交</button> </form> </div> </body> </html> ```

阅读全文