首页用 html 和 css 制作简单的信息填写表，并带运行结果

用 html 和 css 制作简单的信息填写表，并带运行结果

时间: 2024-06-09 12:12:27 浏览: 48

html/css 简单的表单实例

如何实现如下图片的内容？下面我们一起制作该表单页面如下图是布置的作业邮箱 * 密码 * 确认密码 * 用户基本信息性别男女

好的，以下是一个简单的信息填写表的 HTML 和 CSS 代码： ```html <!DOCTYPE html> <html> <head> <title>Information Form</title> <style> form { display: flex; flex-direction: column; align-items: flex-start; margin: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } label { margin-bottom: 10px; font-weight: bold; } input[type="text"], select { padding: 5px; margin-bottom: 10px; border-radius: 5px; border: 1px solid #ccc; } input[type="submit"] { padding: 10px; background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; cursor: pointer; } </style> </head> <body> <form> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="text" id="email" name="email"> <label for="gender">Gender:</label> <select id="gender" name="gender"> <option value="male">Male</option> <option value="female">Female</option> <option value="other">Other</option> </select> <label for="message">Message:</label> <textarea id="message" name="message"></textarea> <input type="submit" value="Submit"> </form> </body> </html> ``` 这个表单有四个字段：姓名、电子邮件、性别和留言，还有一个提交按钮。CSS 样式将表单放置在灰色边框内，并使用简单的样式使其看起来更好。以下是此表单的运行结果： ![information-form](https://i.imgur.com/2GQ2jJv.png)

阅读全文