首页需要一个标题带上五个输入框和一个按钮的美化版本html代码

需要一个标题带上五个输入框和一个按钮的美化版本html代码

时间: 2024-05-06 16:17:11 浏览: 86

以下是一个带有五个输入框和一个按钮的美化版本的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Input Form</title> <style> /* Style the input fields */ input[type=text], select { padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } /* Style the button */ button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } /* Change the background color of the submit button on hover */ button:hover { background-color: #45a049; } /* Add a container for the inputs */ .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } </style> </head> <body> <div class="container"> <h2>Input Form</h2> <form> <label for="fname">First Name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last Name:</label><br> <input type="text" id="lname" name="lname"><br> <label for="email">Email:</label><br> <input type="text" id="email" name="email"><br> <label for="phone">Phone Number:</label><br> <input type="text" id="phone" name="phone"><br> <label for="message">Message:</label><br> <input type="text" id="message" name="message"><br> <button type="submit">Submit</button> </form> </div> </body> </html> ``` 在这个示例中，我们使用了CSS来美化输入框和按钮。我们创建了一个包含所有输入字段和按钮的容器，并将其样式设置为圆角和背景色。每个输入字段都有一个标签，以便用户知道它们需要输入什么信息。最后，我们添加了一个提交按钮，当用户点击它时，表单数据将被提交。

阅读全文