Bài này mình viết ra vì cảm thấy nó quan trọng nhưng không lại không biết viết bắt đầu như thế nào nhưng thôi hãy bắt đầu bằng ý tưởng với một trang web sử dụng nhiều form với các chủ đề khác nhau, ví dụ như form liên hệ, form báo giá, form nộp đơn xin việc...
Trong form thẻ input bắt buộc phải có, thẻ input lại có nhiều loại (type) ví dụ như type="text", type="search", type="radio", type="checkbox"..., và các loại khác. Nếu trong form sử dụng nhiều thẻ input thì tốt nhất nên sắp xếp chia cùng hàng form không quá dài trên màn hình kích thước lớn.
Thay vì mỗi thẻ input một hàng, có thể chia gộp từ 2 thẻ input thành một hàng nhưng vẫn đảm bảo hiển thị đủ nội dung trong thẻ. Cách chia và thiết kế css như thế nào hãy học và áp dụng theo cách làm của bootstrap nhưng không nên sử dụng cái có sẵn của bootstrap vì làm như vậy nó rất thừa thãi.
Đầu tiên hãy bắt đầu bằng một thẻ input đơn giản sử dụng để điền như sau:
<div class="input-group">
<div class="input-title">Họ tên <span>*</span></div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." required="" spellcheck="false" type="text" value=""/>
</div>
Viết css hiển thị
.input-group {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
margin-bottom: 15px;
}
.input-title {
margin-bottom: 10px;
}
.input-title span {
color: #d93025;
}
.input-text {
background-color: #fff;
height: 36px;
line-height: 34px;
width: 100%;
padding: 0 0 0 20px;
font-size: 15px;
color: #111;
border: 1px solid;
border-color: rgba(0,0,0,0.12);
-webkit-border-radius: 4px;
border-radius: 4px;
}
.input-text:focus {
outline: none;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
border-color: #03a9f4;
}
Hiển thị
1. Sắp xếp các thẻ input cùng hàng
Tiếp theo sẽ đến cách sắp xếp đặt các thẻ input để chúng cùng hàng nhau, giả sử bạn đặt 2 thẻ input thì chiều rộng của mỗi thẻ bằng 50%, bạn đặt 3 thẻ input mà chia chiều rộng của mỗi thẻ bằng nhau => chiều rộng của mỗi thẻ bằng 33.33%. Lại lấy ví dụ bạn đặt 3 thẻ input nhưng trong đó có 1 thẻ chiều rộng bằng 50% và 2 thẻ còn lại có chiều rộng bằng nhau => chiều rộng của 2 thẻ còn lại bằng 25%...
Để làm được như vậy, bạn nên thiết kế thêm các class có kích thươc chiều rộng bằng phần trăm, ví dụ bạn sẽ viết css cho các class như sau:
.w-16 {
width: 16.67%;
}
.w-20 {
width: 20%;
}
.w-25 {
width: 25%;
}
.w-30 {
width: 30%;
}
.w-33 {
width: 33.33%;
}
.w-40 {
width: 40%;
}
.w-50 {
width: 50%;
}
.w-60 {
width: 60%;
}
.w-75 {
width: 75%;
}
.w-80 {
width: 80%;
}
.w-100 {
width: 100%;
}
.w-16, .w-20, .w-25, .w-30, .w-33, .w-40, .w-50, .w-60, .w-70, .w-75, .w-80, .w-100 {
float: left;
}
Cứ như vậy bạn thêm class làm sau để chúng cộng lại cho ra một con số chẵn ví dụ bằng 50%, 100%...Tuy nhiên khi bạn chia như vậy bắt buộc phải viết thêm @media (max-width) đề phù hợp với kích thước màn hình nhỏ. Thay vào đó bạn sẽ sử dụng thêm @media (min-width) hoặc kết hợp cả @media (max-width) và @media (min-width) như sau:
.w-16, .w-20, .w-25, .w-30, .w-33, .w-40, .w-50, .w-60, .w-70, .w-75, .w-80, .w-100 {
float: left;
}
.w-100 {
width: 100%;
}
@media (min-width: 415px) {
.w-16 {width: 16.67%;}
.w-20 {width: 20%;}
.w-25 {width: 25%;}
.w-30 {width: 30%;}
.w-33 {width: 33.33%;}
.w-35 {width: 35%;}
.w-40 {width: 40%;}
.w-50 {width: 50%;}
.w-60 {width: 60%;}
.w-70 {width: 70%;}
.w-75 {width: 75%;}
.w-80 {width: 80%;}
.w-85 {width: 85%;}
.w-90 {width: 90%;}
}
@media (min-width: 321px) and (max-width: 414px) {
.w-16 {width: 25%;}
.w-20, .w-25, .w-30, .w-33, .w-35, .w-40 {width: 50%;}
}
@media (max-width: 414px) {
.w-50, .w-60, .w-70, .w-75, .w-80 {width: 100%;}
}
@media (max-width: 320px) {
.w-16, .w-20, .w-25 {width: 50%;}
.w-30, .w-33, .w-35, .w-40 {width: 100%;}
}
Khi bạn viết css cho class chiều rộng, tiếp đến bạn sẽ đặt các class này cùng với các class input-group để sắp xếp các thẻ input cùng hàng. Như đã đề cập về cách đặt và chia chiều rộng các thẻ input để chúng cùng hàng, ta có các ví dụ minh họa
+ 2 thẻ input chiều rộng của mỗi thẻ bằng 50%
<div class="input-group w-50">
<div class="input-title">Câu hỏi <span>*</span></div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." required="" spellcheck="false" type="text" value=""/>
</div>
<div class="input-group w-50">
<div class="input-title">Câu hỏi</div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." spellcheck="false" type="text" value=""/>
</div>
Hiển thị
+ 3 thẻ input chiều rộng của mỗi thẻ bằng 33.33%
<div class="input-group w-33">
<div class="input-title">Câu hỏi</div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." spellcheck="false" type="text" value=""/>
</div
<div class="input-group w-33">
<div class="input-title">Câu hỏi</div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." spellcheck="false" type="text" value=""/>
</div>
<div class="input-group w-33">
<div class="input-title">Câu hỏi</div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." spellcheck="false" type="text" value=""/>
</div>
Hiển thị
+ 3 thẻ input nhưng trong đó có 1 thẻ chiều rộng bằng 50% và 2 thẻ còn lại có chiều rộng bằng 25%
<div class="input-group w-50">
<div class="input-title">Câu hỏi</div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." spellcheck="false" type="text" value=""/>
</div
<div class="input-group w-25">
<div class="input-title">Câu hỏi</div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." spellcheck="false" type="text" value=""/>
</div>
<div class="input-group w-25">
<div class="input-title">Câu hỏi</div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." spellcheck="false" type="text" value=""/>
</div>
Hiển thị
2. Chia khoảng cách giữa các thẻ input
Một vấn đề phát sinh ở đây khi chia chiều rộng cho các thẻ input thì khoảng cách giữa các thẻ này sát nhau và có thể bạn muốn chia khoảng cách giữa các thẻ input này bằng một kích thước nhất định chẳng hạn bằng 20px, 30px,...do đó bạn cần thêm một class khoảng cách đặt cùng với class của chiều rộng cùng với class input-group
Ví dụ bạn sẽ viết css khoảng cách cho class tự đặt
.pd-10 {
padding-left: 10px;
padding-right: 10px;
}
.pd-15 {
padding-left: 15px;
padding-right: 15px;
}
Lúc đó bạn sẽ đặt class pd-10 hoặc pd-15 cùng class input-group như sau
<div class="input-group pd-10">
...
</div>
Do bạn chia khoảng cách giữa các thẻ input đều nhau nên 2 thẻ input trái và phải ngoài cùng mặc định sẽ bị hẹp vào bên trái phải 10px hoặc 15px do đó bạn cần một thẻ div bao quanh các thẻ các thẻ div với class input-group. Lấy ví dụ minh họa
<div class="form-group mr-10">
<div class="input-group pd-10 w-50">
<div class="input-title">Câu hỏi</div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." spellcheck="false" type="text" value=""/>
</div>
<div class="input-group pd-10 w-25">
<div class="input-title">Câu hỏi</div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." spellcheck="false" type="text" value=""/>
</div>
<div class="input-group pd-10 w-25">
<div class="input-title">Câu hỏi</div>
<input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời..." spellcheck="false" type="text" value=""/>
</div>
</div>
Hiển thị
Viết css cho class form-group và mr-10, mr-15
.form-group {
position: relative;
}
.form-group::after {
display: block;
clear: both;
content: "";
}
.mr-15 {
margin-left: -15px;
margin-right: -15px;
}
.mr-10 {
margin-left: -10px;
margin-right: -10px;
}
Khi bạn muốn khoảng cách giửa các thẻ input bằng 20px thì bạn đặt class pd-10 cùng với class input-group và đặt class mr-10 cùng với class form-group. Và nếu muốn chiều rộng bằng 30px thì thay bằng class pd-15 và mr-15. Demo một mẫu form nộp đơn xin việc trong đó các thẻ input được chia cùng hàng
