Trang chủ
CSS
Biểu mẫu CSS
Dùng thử: Hình thức đáp ứng
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } đầu vào[loại=văn bản], chọn, vùng văn bản { chiều rộng: 100%; phần đệm: 12px; đường viền: 1px liền khối #ccc; bán kính đường viền: 4px; thay đổi kích thước: dọc; } nhãn { phần đệm: 12px 12px 12px 0; hiển thị: khối nội tuyến; } đầu vào[type=submit] { màu nền: #04AA6D; màu trắng; phần đệm: 12px 20px; đường viền: không có; bán kính đường viền: 4px; con trỏ: con trỏ; phao: đúng; } đầu vào[type=submit]:hover { màu nền: #45a049; } .container { bán kính đường viền: 5px; màu nền: #f2f2f2; phần đệm: 20px; } .col-25 { float: left; chiều rộng: 25%; lề trên: 6px; } .col-75 { float: left; chiều rộng: 75%; lề trên: 6px; } /* Xóa phần nổi sau các cột */ .row::after { content: ""; hiển thị: bảng; rõ ràng: cả hai; } /* Bố cục đáp ứng - khi màn hình rộng dưới 600px, đặt hai cột xếp chồng lên nhau thay vì cạnh nhau */ @media screen và (max-width: 600px) { .col-25, .col-75, đầu vào[type=submit] { chiều rộng: 100%; lề trên: 0; } } </style> </head> <body> <h2>Biểu mẫu phản hồi</h2> <p>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng. Khi màn hình rộng dưới 600px, hãy đặt hai cột xếp chồng lên nhau thay vì cạnh nhau.</p> <div class="container"> <form action="/action_page.php"> < div class="row"> <div class="col-25"> <label for="fname">Tên</label> </div> <div class="col-75"> <input type=" text" id="fname" name="firstname" placeholder="Tên của bạn.."> </div> </div> <div class="row"> <div class="col-25"> <nhãn cho ="lname">Họ</label> </div> <div class="col-75"> <input type="text" id="lname" name="lastname" placeholder="Họ của bạn.. "> </div> </div> <div class="row"> <div class="col-25"> <label for="country">Quốc gia</label> </div> <div class=" col-75"> <select id="country" name="country"> <option value="australia">Úc</option> <option value="canada">Canada</option> <option value="usa ">Hoa Kỳ</option> </select> </div> </div> <div class="row"> <div class="col-25"> <label for="subject">Chủ đề</label> </div> <div class="col-75"> <textarea id="subject" name="subject" placeholder="Viết gì đó.." style="height:200px"></textarea> </div> </div> <br> <div class="row"> <input type="submit" value="Submit"> </div> </form> </div> </body> </html>