CSS 在線留言表單非常常見,因為它可以幫助網站的訪問者在網站上留言反饋,提供意見和建議。通過 CSS,我們可以定制表單的樣式,使其更加美觀而且易于使用。
下面是一個使用 CSS 定制的在線留言表單:
<form> <div class="form-group"> <label for="name-input">姓名</label> <input type="text" id="name-input" name="name-input"> </div> <div class="form-group"> <label for="email-input">郵箱</label> <input type="email" id="email-input" name="email-input"> </div> <div class="form-group"> <label for="message-input">留言內容</label> <textarea id="message-input" name="message-input"></textarea> </div> <button type="submit">提交</button> </form>
上面的代碼創建了一個包含三個表單組件的表單:一個文本框(輸入姓名)、一個 email 輸入框和一個文本域(用于留言)。我們使用 CSS 添加樣式來使表單看起來更好。例如:
.form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: bold; } input[type="text"], input[type="email"], textarea { width: 100%; padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button[type="submit"] { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } button[type="submit"]:hover { background-color: #45a049; }
上面的代碼中,我們使用了一些常見的 CSS 樣式:設置了一些 margin 和 padding、改變字體大小、使用了圓角邊框等。
這樣看起來更加美觀的留言表單將幫助訪問者更方便地提供反饋和建議,這也是每個網站都應該考慮使用 CSS 來定制表單的原因之一。
上一篇vue每天進入彈出
下一篇css 地圖 下載工具