NTM Solutions

Thứ Bảy, 2 tháng 7, 2022

Tự học CSS - Bài 32 - Định dạng biểu mẫu

Định dạng INPUT

Sử dụng thuộc tính width để khai báo bề ngang của input.

input {
  width
: 100%;
}

Ví dụ trên áp dụng cho tất cả phần tử <input>. Nếu bạn chỉ muốn định dạng 01 input nhất định, bạn có thể dùng cách chọn qua thuộc tính.

input[type=text] – chỉ chọn text fields

input[type=password] – chỉ chọn các password fields

input[type=number] – chỉ chọn các number fields

và còn nhiều trường khác nữa.


Padded Inputs

Dùng thuộc tính padding để thêm khoảng trắng bên trong text field.

Mẹo: khi bạn có nhiều inputs xen kẽ nhau, bạn cũng sẽ muốn thêm vào margin để thêm khoảng cách giữa chúng.

input[type=text] {
  width
: 100%;
  padding
: 12px 20px;
  margin
: 8px 0;
  box-sizing
: border-box;
}

Chú ý rằng chúng ta thiết lập thuộc tính box-sizing cho border-box. Điều này đảm bảo rằng padding và ngay cả các đường viền được bao gồm trong kích thước tổng chiều cao và bề rộng của các phần tử.

Bordered Inputs

Dùng thuộc tính border để thay đổi kích thước và màu sắc đường viền, và dùng thuộc tính border-radius để bo tròn đường viền.

Ví dụ:

input[type=text] {
  border
: 2px solid red;
  border-radius
: 4px;
}

 

Nếu bạn chỉ muốn 01 đường viền dưới, dùng thuộc tính border-bottom.

Ví dụ:

input[type=text] {
  border
: none;
  border-bottom
: 2px solid red;
}


Colored Inputs

Dùng thuộc tính background-color để thêm 01 màu nền cho input, và thuộc tính color để đổi màu chữ,

Ví dụ:

input[type=text] {
  background-color
: #3CBC8D;
  color
: white;
}


Focused Inputs

Mặc định, vài trình duyệt sẽ thêm viền xanh quanh input khi nó được chọn. Bạn có thể bỏ hành vi này bằng cách thêm outline:none; đối với input.

Dùng thuộc tính :focus để làm điều gì đó với input field khi nó được chọn:

Ví dụ:

Tạo nền xanh khi input được chọn:

input[type=text]:focus {
  background-color
: lightblue;
}

Tạo viền đen khi input được chọn:

input[type=text]:focus {
  border
: 3px solid #555;
}


Input có hình icon

Nếu bạn muốn thêm biểu tượng bên trong input, dùng thuộc tính background-image và định vị trí nó bằng thuộc tính background-position

Chúng ta cũng cần chú ý rằng cần phải lùi padding 01 khoảng lớn để chừa chỗ cho biểu tượng.

Ví dụ:

input[type=text] {
  background-color
: white;
  background-image
: url('searchicon.png');
  background-position
: 10px 10px;
  background-repeat
: no-repeat;
  padding-left
: 40px;
}


Search Input động

Trong ví dụ này, chúng ta dùng thuộc tính transition để làm thay đổi thuộc tính width của ô Search Input khi được chọn.

input[type=text] {
  transition
: width 0.4s ease-in-out;
}

input[type=text]:focus
{
  width
: 100%;
}


Định dạng Textareas

Mẹo: sử dụng thuộc tính resize để ngăn textareas bị thay đổi kích thước(vô hiệu hóa nút “grabber” ở góc phải)

textarea {
  width
: 100%;
  height
: 150px;
  padding
: 12px 20px;
  box-sizing
: border-box;
  border
: 2px solid #ccc;
  border-radius
: 4px;
  background-color
: #f8f8f8;
  resize
: none; // là cái này
}


Định dạng Select Menus

select {
  width
: 100%;
  padding
: 16px 20px;
  border
: none;
  border-radius
: 4px;
  background-color
: #f1f1f1;
}


Định dạng Input Buttons

input[type=button], input[type=submit], input[type=reset] {
  background-color
: #04AA6D;
  border
: none;
  color
: white;
  padding
: 16px 32px;
  text-decoration
: none;
  margin
: 4px 2px;
  cursor
: pointer;
}

/* Mẹo: dùng width: 100% đối với nút dài hết bề ngang*/


Biểu mẫu responsive

Thay đổi cửa sổ trình duyệt để thấy hiệu ứng. Khi màn hình nhỏ hơn 600px, 02 cột sẽ tự động xếp chồng lên nhau thay vì nằm kế tiếp nhau. Đây gọi là màn hình responsive.

Ví dụ:

<html>
<head>
<style>

* {

  box-sizing: border-box;

}

 

input[type=text], select, textarea {

  width: 100%;

  padding: 12px;

  border: 1px solid #ccc;

  border-radius: 4px;

  resize: vertical;

}

 

label {

  padding: 12px 12px 12px 0;

  display: inline-block;

}

 

input[type=submit] {

  background-color: #04AA6D;

  color: white;

  padding: 12px 20px;

  border: none;

  border-radius: 4px;

  cursor: pointer;

  float: right;

}

 

input[type=submit]:hover {

  background-color: #45a049;

}

 

.container {

  border-radius: 5px;

  background-color: #f2f2f2;

  padding: 20px;

}

 

.col-25 {

  float: left;

  width: 25%;

  margin-top: 6px;

}

 

.col-75 {

  float: left;

  width: 75%;

  margin-top: 6px;

}

 

/* Chặn floats sau các cột */

.row:after {

  content: "";

  display: table;

  clear: both;

}

 

/* Responsive layout - khi màn hình bề rộng nhỏ hơn 600px, nó sẽ tạo ra 02 cột xếp chồng lên nhau thay vì nằm cạnh nhau*/

@media screen and (max-width: 600px) {

  .col-25, .col-75, input[type=submit] {

    width: 100%;

    margin-top: 0;

  }

}

</style>

</head>

<body>

 

<h2>Responsive Form</h2>

<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>

 

<div class="container">

  <form action="/action_page.php">

  <div class="row">

    <div class="col-25">

      <label for="fname">First Name</label>

    </div>

    <div class="col-75">

      <input type="text" id="fname" name="firstname" placeholder="Your name..">

    </div>

  </div>

  <div class="row">

    <div class="col-25">

      <label for="lname">Last Name</label>

    </div>

    <div class="col-75">

      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    </div>

  </div>

  <div class="row">

    <div class="col-25">

      <label for="country">Country</label>

    </div>

    <div class="col-75">

      <select id="country" name="country">

        <option value="australia">Australia</option>

        <option value="canada">Canada</option>

        <option value="usa">USA</option>

      </select>

    </div>

  </div>

  <div class="row">

    <div class="col-25">

      <label for="subject">Subject</label>

    </div>

    <div class="col-75">

      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    </div>

  </div>

  <br>

  <div class="row">

    <input type="submit" value="Submit">

  </div>

  </form>

</div>

</body>

</html>

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:


Xem MỤC LỤC BÀI VIẾT VỀ CSS

Sưu tầm bởi #drM

Không có nhận xét nào:

Đăng nhận xét

Facebook Youtube RSS