要制作一個響應式的表單,可以按照以下步驟進行:
<form class="responsive-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="Submit">
</form>
.responsive-form {
max-width: 600px;
margin: 0 auto;
}
.responsive-form label {
display: block;
margin-bottom: 5px;
}
.responsive-form input,
.responsive-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
.responsive-form input[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
@media (max-width: 600px) {
.responsive-form input,
.responsive-form textarea {
width: 100%;
}
}
使用CSS媒體查詢來使表單在不同屏幕尺寸下能夠自適應布局。在上面的例子中,當屏幕寬度小于600px時,表單元素的寬度將變為100%。
可以根據需要進一步調整表單的樣式和布局,例如添加表單字段的樣式、調整間距等。
通過以上步驟,你就可以制作一個響應式的表單,讓用戶在不同設備上都能夠方便地填寫和提交表單信息。