Html-Css # css # html

Bài 4: Form và Input – Tạo biểu mẫu

⏱ 17 phút đọc 👁 24 💬 0 bình luận

Hầu hết các trang web đều có biểu mẫu (form) để người dùng nhập dữ liệu: đăng nhập, đăng ký, liên hệ, tìm kiếm… Bài này sẽ dạy bạn cách tạo form HTML hoàn chỉnh với các loại input khác nhau, từ ô text đơn giản đến checkbox, radio button, và dropdown.

Sau bài này, bạn sẽ có thể tạo các biểu mẫu tương tác và gửi dữ liệu từ người dùng đến server.

Thẻ Form (form) – Vùng chứa biểu mẫu

Thẻ <form> là vùng chứa tất cả các phần tử nhập liệu của biểu mẫu. Nó có hai thuộc tính quan trọng:

Thuộc tínhChức năngVí dụ
actionURL server xử lý dữ liệu formaction="submit-form.php"
methodPhương thức gửi dữ liệu (GET hoặc POST)method="POST"
<!-- Cấu trúc cơ bản của form -->
<form action="submit.php" method="POST">
  <!-- Các phần tử input sẽ nằm ở đây -->
</form>

Phương thức GET vs POST

Phương thứcCách hoạt độngKhi nào dùng
GETDữ liệu hiển thị trên URL (không an toàn)Tìm kiếm, bộ lọc
POSTDữ liệu gửi ẩn trong body (an toàn hơn)Đăng nhập, đăng ký, gửi email

Thẻ Input (input) – Ô nhập liệu

Thẻ <input> là thẻ tự đóng dùng để tạo các ô nhập liệu. Loại input được xác định bằng thuộc tính type.

1. Input loại Text (input type=”text”)

Dùng để nhập chữ hoặc số một dòng.

<!-- Input text đơn giản -->
<input type="text" name="username" placeholder="Nhập tên người dùng">

<!-- Input với giá trị mặc định -->
<input type="text" name="email" value="example@email.com">

<!-- Input với yêu cầu bắt buộc -->
<input type="text" name="fullname" required>

2. Input loại Password (input type=”password”)

Dùng để nhập mật khẩu (ký tự bị che đi).

<input type="password" name="password" placeholder="Nhập mật khẩu">
<input type="password" name="confirm_password" placeholder="Xác nhận mật khẩu">

3. Input loại Email (input type=”email”)

Dùng để nhập email (tự động kiểm tra định dạng).

<input type="email" name="email" placeholder="Nhập email" required>

4. Input loại Number (input type=”number”)

Dùng để nhập số với các nút + / – để điều chỉnh.

<!-- Input số đơn giản -->
<input type="number" name="age" placeholder="Nhập tuổi">

<!-- Input số với giới hạn -->
<input type="number" name="quantity" min="1" max="100" value="5">

5. Input loại Checkbox (input type=”checkbox”)

Dùng để chọn một hoặc nhiều tùy chọn.

<!-- Checkbox -->
<label>
  <input type="checkbox" name="agree" value="yes">
  Tôi đồng ý với điều khoản
</label>

<!-- Checkbox (checked mặc định) -->
<label>
  <input type="checkbox" name="newsletter" value="yes" checked>
  Nhận thông báo qua email
</label>

<!-- Nhiều checkbox -->
<p>Chọn kỹ năng của bạn:</p>
<label><input type="checkbox" name="skills" value="html"> HTML</label>
<label><input type="checkbox" name="skills" value="css"> CSS</label>
<label><input type="checkbox" name="skills" value="js"> JavaScript</label>

6. Input loại Radio (input type=”radio”)

Dùng để chọn chỉ một tùy chọn trong một nhóm.

<!-- Radio button -->
<p>Chọn giới tính:</p>
<label>
  <input type="radio" name="gender" value="male">
  Nam
</label>

<label>
  <input type="radio" name="gender" value="female">
  Nữ
</label>

<label>
  <input type="radio" name="gender" value="other">
  Khác
</label>

<!-- Radio (checked mặc định) -->
<label>
  <input type="radio" name="level" value="beginner" checked>
  Người mới bắt đầu
</label>

7. Input loại Date (input type=”date”)

Dùng để chọn ngày tháng năm.

<!-- Input date -->
<input type="date" name="birthdate">

<!-- Date với giới hạn -->
<input type="date" name="appointment" min="2024-01-01" max="2024-12-31">

8. Input loại File (input type=”file”)

Dùng để cho phép người dùng tải lên tệp.

<!-- Tải lên file đơn giản -->
<input type="file" name="avatar">

<!-- Tải lên ảnh (hạn chế loại file) -->
<input type="file" name="photo" accept="image/*">

<!-- Tải lên đa tệp -->
<input type="file" name="documents" accept=".pdf,.doc,.docx" multiple>

9. Input loại Hidden (input type=”hidden”)

Dùng để lưu dữ liệu ẩn gửi cùng form (người dùng không thấy).

<input type="hidden" name="form_id" value="contact_form_v1">

Các thuộc tính chung của input

Thuộc tínhChức nángVí dụ
nameTên trường (bắt buộc để gửi dữ liệu)name="email"
typeLoại input (text, email, password…)type="email"
placeholderChữ hướng dẫn hiển thị khi trốngplaceholder="Nhập email"
valueGiá trị mặc địnhvalue="example@email.com"
requiredBắt buộc nhập (không để trống)required
disabledVô hiệu hóa input (không thể chỉnh sửa)disabled
maxlengthSố ký tự tối đamaxlength="50"
min / maxGiá trị tối thiểu / tối đa (số, date)min="1" max="100"

Thẻ Label (label) – Nhãn cho input

Thẻ <label> dùng để gắn nhãn với input. Khi người dùng nhấp vào nhãn, input sẽ được focus.

<!-- Cách 1: Label bao quanh input -->
<label>
  Email:
  <input type="email" name="email">
</label>

<!-- Cách 2: Label liên kết với input qua id -->
<label for="username">Tên người dùng:</label>
<input type="text" name="username" id="username">

<!-- Cách 3: Label cho checkbox -->
<input type="checkbox" name="agree" id="agree">
<label for="agree">Tôi đồng ý với điều khoản</label>

Thẻ Textarea (textarea) – Ô nhập text nhiều dòng

Dùng để nhập text nhiều dòng (tin nhắn, ghi chú, bình luận…).

<!-- Textarea đơn giản -->
<label for="message">Lời nhắn:</label>
<textarea name="message" id="message" placeholder="Nhập lời nhắn..."></textarea>

<!-- Textarea với kích thước cố định -->
<textarea name="comments" rows="5" cols="40"></textarea>

<!-- Textarea với giới hạn ký tự -->
<textarea name="bio" maxlength="500" placeholder="Tối đa 500 ký tự"></textarea>

Các thuộc tính của textarea

Thuộc tínhChức năng
nameTên trường
rowsSố dòng hiển thị
colsSố ký tự mỗi dòng
placeholderChữ hướng dẫn
maxlengthSố ký tự tối đa

Thẻ Select (select) – Danh sách thả xuống

Dùng để tạo danh sách thả xuống để người dùng chọn một tùy chọn.

<!-- Select đơn giản -->
<label for="country">Quốc gia:</label>
<select name="country" id="country">
  <option value="">-- Chọn quốc gia --</option>
  <option value="vn">Việt Nam</option>
  <option value="th">Thái Lan</option>
  <option value="id">Indonesia</option>
</select>

<!-- Select với option mặc định -->
<label for="level">Cấp độ học tập:</label>
<select name="level" id="level">
  <option value="beginner">Người mới bắt đầu</option>
  <option value="intermediate" selected>Trung cấp</option>
  <option value="advanced">Nâng cao</option>
</select>

<!-- Select với optgroup (nhóm tùy chọn) -->
<label for="fruit">Chọn hoa quả:</label>
<select name="fruit" id="fruit">
  <optgroup label="Trái cây mọng nước">
    <option value="apple">Táo</option>
    <option value="orange">Cam</option>
  </optgroup>
  <optgroup label="Trái cây khô">
    <option value="grape">Nho khô</option>
    <option value="date">Chà là</option>
  </optgroup>
</select>

Thẻ Button (button) – Nút bấm

Dùng để tạo nút bấm gửi form hoặc kích hoạt hành động.

<!-- Nút submit (gửi form) -->
<button type="submit">Gửi</button>

<!-- Nút reset (xóa dữ liệu form) -->
<button type="reset">Xóa</button>

<!-- Nút thường (không hành động mặc định) -->
<button type="button">Bấm tôi</button>

<!-- Input type button (thay thế cho thẻ button) -->
<input type="submit" value="Gửi">
<input type="reset" value="Xóa">
<input type="button" value="Bấm tôi">

💡 Mẹo: Dùng thẻ <button> thay vì <input type="button"> vì dễ CSS hóa hơn. Ngoài ra, bạn có thể thêm hình ảnh hoặc icon bên trong button.

Ví dụ form hoàn chỉnh – Đăng ký tài khoản

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Đăng ký tài khoản</title>
</head>
<body>

  <h1>Đăng ký tài khoản mới</h1>

  <form action="register.php" method="POST">

    <!-- Trường họ tên -->
    <label for="fullname">Họ và tên:</label>
    <input 
      type="text" 
      id="fullname" 
      name="fullname" 
      placeholder="Nhập họ và tên"
      required
    ><br><br>

    <!-- Trường email -->
    <label for="email">Email:</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      placeholder="Nhập email"
      required
    ><br><br>

    <!-- Trường tuổi -->
    <label for="age">Tuổi:</label>
    <input 
      type="number" 
      id="age" 
      name="age" 
      min="13" 
      max="120"
    ><br><br>

    <!-- Trường giới tính -->
    <fieldset>
      <legend>Giới tính:</legend>
      <label>
        <input type="radio" name="gender" value="male">
        Nam
      </label>
      <label>
        <input type="radio" name="gender" value="female">
        Nữ
      </label>
      <label>
        <input type="radio" name="gender" value="other">
        Khác
      </label>
    </fieldset><br>

    <!-- Trường ngôn ngữ lập trình -->
    <fieldset>
      <legend>Ngôn ngữ lập trình quan tâm:</legend>
      <label>
        <input type="checkbox" name="languages" value="html">
        HTML
      </label><br>
      <label>
        <input type="checkbox" name="languages" value="css">
        CSS
      </label><br>
      <label>
        <input type="checkbox" name="languages" value="js">
        JavaScript
      </label><br>
      <label>
        <input type="checkbox" name="languages" value="php">
        PHP
      </label>
    </fieldset><br>

    <!-- Trường quốc gia -->
    <label for="country">Quốc gia:</label>
    <select name="country" id="country">
      <option value="">-- Chọn quốc gia --</option>
      <option value="vn">Việt Nam</option>
      <option value="th">Thái Lan</option>
      <option value="id">Indonesia</option>
      <option value="ph">Philippines</option>
    </select><br><br>

    <!-- Trường mô tả bản thân -->
    <label for="bio">Mô tả bản thân:</label><br>
    <textarea 
      id="bio" 
      name="bio" 
      rows="4" 
      cols="50"
      placeholder="Viết vài dòng về bản thân..."
    ></textarea><br><br>

    <!-- 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"
      required
    ><br><br>

    <!-- Trường xác nhận mật khẩu -->
    <label for="confirm_password">Xác nhận mật khẩu:</label>
    <input 
      type="password" 
      id="confirm_password" 
      name="confirm_password" 
      placeholder="Xác nhận mật khẩu"
      required
    ><br><br>

    <!-- Checkbox đồng ý -->
    <label>
      <input type="checkbox" name="agree" value="yes" required>
      Tôi đồng ý với <a href="terms.html">điều khoản sử dụng</a>
    </label><br><br>

    <!-- Nút gửi và xóa -->
    <button type="submit">Đăng ký</button>
    <button type="reset">Xóa</button>

  </form>

</body>
</html>

Thẻ Fieldset và Legend – Nhóm các trường liên quan

Thẻ <fieldset> dùng để nhóm các trường form liên quan. Thẻ <legend> tạo tiêu đề cho nhóm đó.

<fieldset>
  <legend>Thông tin cá nhân</legend>
  
  <label for="name">Tên:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

</fieldset>

Validation (Kiểm tra dữ liệu)

HTML5 hỗ trợ kiểm tra dữ liệu cơ bản mà không cần JavaScript.

<!-- Bắt buộc nhập -->
<input type="text" name="username" required>

<!-- Email hợp lệ -->
<input type="email" name="email" required>

<!-- Số trong khoảng -->
<input type="number" name="age" min="13" max="120" required>

<!-- URL hợp lệ -->
<input type="url" name="website" required>

<!-- Điều kiện bắt buộc -->
<input type="checkbox" name="agree" required>

<!-- Số ký tự -->
<input type="text" name="username" minlength="6" maxlength="20" required>

<!-- Biểu thức chính quy (pattern) -->
<input type="text" name="phone" pattern="[0-9]{10}" placeholder="Nhập 10 chữ số">

⚠️ Cảnh báo: Validation HTML5 chỉ kiểm tra phía client (trên trình duyệt). Bạn phải kiểm tra lại phía server để đảm bảo an toàn, vì người dùng có thể bypass validation bằng các công cụ.

Tóm tắt

  • ✅ Thẻ <form>: Vùng chứa biểu mẫu, có thuộc tính action và method
  • ✅ Input text: type="text" cho ô nhập chữ / số
  • ✅ Input email/password: type="email" và type="password"
  • ✅ Input checkbox: Chọn một hoặc nhiều tùy chọn
  • ✅ Input radio: Chọn chỉ một tùy chọn
  • ✅ Input date: Chọn ngày tháng năm
  • ✅ Input file: Tải lên tệp tin
  • ✅ Label: Gắn nhãn với input (cải thiện UX)
  • ✅ Textarea: Nhập text nhiều dòng
  • ✅ Select: Danh sách thả xuống
  • ✅ Button: Nút gửi form, xóa, hoặc hành động khác
  • ✅ Validation: required, min, max, pattern…

🎯 Bài tập thực hành

Bài tập 1: Tạo form “Liên hệ” với các trường:

  • Họ tên (text, bắt buộc)
  • Email (email, bắt buộc)
  • Số điện thoại (text hoặc number)
  • Chủ đề (select: “Góp ý”, “Báo cáo lỗi”, “Khác”)
  • Nội dung tin nhắn (textarea, bắt buộc)
  • Nút “Gửi” và “Xóa”

Bài tập 2: Tạo form “Khảo sát” với:

  • Tên người dùng (text, bắt buộc)
  • Tuổi (number, từ 13 đến 100)
  • Giới tính (radio: Nam / Nữ / Khác)
  • Ngôn ngữ lập trình yêu thích (checkbox: HTML, CSS, JavaScript, PHP, Python)
  • Cấp độ kinh nghiệm (select: Người mới / Trung cấp / Nâng cao)
  • Checkbox: “Tôi muốn nhận thông báo”
  • Nút “Gửi khảo sát”

Bài tập 3: Tạo form “Tạo tài khoản” đầy đủ (như ví dụ trong bài) với:

  • Họ tên, email, tuổi
  • Giới tính (radio)
  • Kỹ năng lập trình (checkbox)
  • Quốc gia (select)
  • Mô tả bản thân (textarea)
  • Mật khẩu và xác nhận mật khẩu
  • Checkbox: “Tôi đồng ý với điều khoản”
  • Nút “Đăng ký” và “Xóa”

Chúc bạn thành công! 🚀

Bài viết liên quan

Để lại bình luận

Email của bạn sẽ không được hiển thị.