×

Cách sử dụng thẻ <input> để tạo trường nhập liệu trong HTML

Avatar of admin
admin 1 Views

Chắc hẳn khi bạn bắt đầu học về phát triển web và làm việc với HTML, bạn đã nghe qua về thẻ <input>. Đây là một thẻ cực kỳ quan trọng trong việc tạo ra các biểu mẫu nhập liệu (forms) để tương tác với người dùng. Dưới đây là cách sử dụng thẻ <input> để tạo trường nhập liệu trong HTML.

Khái niệm cơ bản về thẻ <input>

Thẻ <input> là phần tử dùng để tạo các trường nhập liệu trong biểu mẫu. Các trường này có thể bao gồm nhiều loại khác nhau, chẳng hạn như trường văn bản, mật khẩu, địa chỉ email, số điện thoại, chọn màu và nhiều loại khác.

Các thuộc tính của thẻ <input>

  1. type: Đây là thuộc tính quan trọng nhất xác định loại trường nhập liệu. Dưới đây là một số giá trị phổ biến cho thuộc tính type:

    • text: Trường nhập liệu văn bản thông thường.
    • password: Trường nhập liệu mật khẩu, các ký tự sẽ được tạo dưới dạng các chấm hoặc dấu sao.
    • email: Trường nhập liệu email, giúp trình duyệt kiểm tra định dạng email chính xác.
    • number: Trường nhập liệu số, chỉ cho phép nhập số.
    • checkbox: Hộp kiểm chọn hoặc bỏ chọn.
    • radio: Nút chọn, thường được nhóm lại với nhau để cho phép chọn một trong nhiều tùy chọn.
    • color: Trường chọn màu, hiển thị bảng màu.
    • date: Trường chọn ngày, hiển thị lịch.
    • file: Trường để tải lên tệp từ máy tính của người dùng.

  2. name: Thuộc tính này dùng để đặt tên cho trường nhập liệu, giúp thu thập dữ liệu từ biểu mẫu.

  3. placeholder: Văn bản hiển thị bên trong trường nhập liệu khi nó trống rỗng, thường dùng để gợi ý cho người dùng biết cần nhập gì vào đây.

  4. value: Giá trị mặc định của trường nhập liệu khi trang được tải.

  5. required: Khi thêm thuộc tính này vào, trường nhập liệu trở thành bắt buộc và người dùng không thể bỏ trống.

  6. readonly: Trường nhập liệu chỉ để xem, không thể chỉnh sửa.

  7. disabled: Trường nhập liệu bị vô hiệu hóa, không thể tương tác.

Ví dụ cụ thể

Dưới đây là một số ví dụ minh họa cách sử dụng thẻ <input> với các thuộc tính khác nhau:

  1. Trường văn bản:
<label for="username">Tên đăng nhập:</label>
<input type="text" id="username" name="username" placeholder="Nhập tên đăng nhập">
  1. Trường mật khẩu:
<label for="password">Mật khẩu:</label>
<input type="password" id="password" name="password" placeholder="Nhập mật khẩu">
  1. Trường Email:
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Nhập email">
  1. Hộp kiểm chọn:
<label for="subscribe">Đăng ký nhận bản tin:</label>
<input type="checkbox" id="subscribe" name="subscribe">
  1. Nút chọn:
<label>Giới tính:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Nam</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Nữ</label>
  1. Chọn màu:
<label for="favcolor">Chọn màu yêu thích:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
  1. Chọn ngày:
<label for="birthday">Ngày sinh:</label>
<input type="date" id="birthday" name="birthday">

Kết hợp các trường nhập liệu vào biểu mẫu

Dưới đây là ví dụ về cách các trường nhập liệu có thể được kết hợp trong một biểu mẫu:

<form action="/submit_form" method="post">
  <label for="username">Tên đăng nhập:</label>
  <input type="text" id="username" name="username" placeholder="Nhập tên đăng nhập" required>

  <label for="password">Mật khẩu:</label>
  <input type="password" id="password" name="password" placeholder="Nhập mật khẩu" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Nhập email" required>

  <label for="subscribe">Đăng ký nhận bản tin:</label>
  <input type="checkbox" id="subscribe" name="subscribe">

  <label>Giới tính:</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Nam</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Nữ</label>

  <label for="favcolor">Chọn màu yêu thích:</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000">

  <label for="birthday">Ngày sinh:</label>
  <input type="date" id="birthday" name="birthday">

  <input type="submit" value="Gửi">
</form>

Kết luận

Thẻ <input> là một công cụ mạnh mẽ và linh hoạt trong HTML, cho phép bạn tạo ra nhiều loại trường nhập liệu khác nhau để thu thập thông tin từ người dùng. Bằng cách sử dụng các thuộc tính đa dạng của thẻ <input>, bạn có thể tạo ra các biểu mẫu phong phú và hữu ích cho bất kỳ ứng dụng web nào.

Comments

Bài viết liên quan