Các phần tử của form

Khái niệm và lý thuyết

label: hai cách gắn nhãn

<p><label for="ho">Họ:</label> <input id="ho" name="ho"></p>
<p><label>Tên: <input name="ten"></label></p>
<p><label><input type="checkbox" name="nhan_tin"> Nhận tin qua email (bấm vào chữ cũng chọn được)</label></p>

Cách 1: for trùng với id của ô. Cách 2: đặt ô bên trong label. Nhãn giúp trình đọc màn hình đọc đúng tên trường và tăng vùng bấm trên điện thoại.

select, option, optgroup

<label for="tinh">Tỉnh:</label>
<select id="tinh" name="tinh">
  <option value="">-- Chọn tỉnh --</option>
  <optgroup label="Tây Bắc">
    <option value="SL" selected>Sơn La</option>
    <option value="DB">Điện Biên</option>
    <option value="LC">Lai Châu</option>
  </optgroup>
  <optgroup label="Đông Bắc">
    <option value="HG">Hà Giang</option>
    <option value="CB" disabled>Cao Bằng (tạm khóa)</option>
  </optgroup>
</select>
<p><label for="mon">Chọn nhiều môn (giữ Ctrl):</label><br>
<select id="mon" name="mon[]" multiple size="4">
  <option>HTML</option><option>CSS</option><option>JavaScript</option><option>PHP</option>
</select></p>

value là giá trị gửi đi, chữ giữa thẻ là chữ hiển thị. selected chọn sẵn, multiple cho chọn nhiều, size số dòng hiển thị.

textarea

<label for="y-kien">Ý kiến của bạn:</label><br>
<textarea id="y-kien" name="y_kien" rows="4" cols="45" maxlength="300" placeholder="Tối đa 300 ký tự"></textarea>

Nội dung mặc định đặt giữa thẻ mở và đóng (không dùng value). Kích thước nên chỉnh bằng CSS width, height; thuộc tính CSS resize: vertical chỉ cho kéo giãn theo chiều dọc.

button và các type

<form onsubmit="alert('submit: gửi form'); return false;">
  <input name="x" value="Dữ liệu mẫu">
  <button type="submit">submit</button>
  <button type="reset">reset (trả về giá trị ban đầu)</button>
  <button type="button" onclick="alert('button: không gửi form')">button</button>
</form>

Nút trong form mặc định là type="submit". Nút chỉ để chạy JavaScript phải ghi rõ type="button", nếu không sẽ vô tình gửi form.

fieldset và legend

<fieldset>
  <legend>Thông tin liên hệ</legend>
  <label>Email: <input type="email" name="email"></label>
</fieldset>
<fieldset disabled>
  <legend>Thông tin công ty (khóa cả nhóm)</legend>
  <label>Tên công ty: <input name="cong_ty"></label>
</fieldset>

datalist: gợi ý khi gõ

<label for="trinh-duyet">Trình duyệt bạn dùng:</label>
<input list="ds-trinh-duyet" id="trinh-duyet" name="trinh_duyet">
<datalist id="ds-trinh-duyet">
  <option value="Chrome"><option value="Edge"><option value="Firefox"><option value="Safari"><option value="Cốc Cốc">
</datalist>

Khác select: người dùng vẫn được gõ giá trị ngoài danh sách.

output, progress, meter

<form oninput="kq.value = Number(a.value) + Number(b.value)">
  <input type="number" id="a" name="a" value="5"> +
  <input type="number" id="b" name="b" value="7"> =
  <output name="kq" for="a b">12</output>
</form>
<p>Tải tệp: <progress value="70" max="100">70%</progress></p>
<p>Dung lượng ổ đĩa: <meter value="0.85" min="0" max="1" low="0.3" high="0.8" optimum="0.2">85%</meter></p>

progress thể hiện tiến độ công việc; meter thể hiện một đại lượng trong khoảng, tự đổi màu khi vượt ngưỡng high/low.