Form trong HTML(P1)

Form trong HTML là một biểu mẫu giúp người dùng tương tác với hệ thống trong khi lập trình web thông qua các thành phần trong nó.

Phần 1: Tìm hiểu vùng làm việc của Form và các thành phần trong Form.

1. Vùng làm việc của Form
Để tạo một form trong HTML ta sử dụng cặp thẻ <form></form> cùng với các thuộc tính của nó
Các thuộc tính của Form

2.1 Thành phần <input />2. Các thành phần của Form
Thành phần <input /> là thành phần quan trọng bậc nhất trong một Form. Nó cho phép chúng ta nhập dữ liệu để thao tác với hệ thống. Dữ liệu nhập từ <input /> phụ thuộc vào thuộc tính type của nó( Chúng ta sẽ tìm hiểu kỹ hơn về thành phần <input /> trong phần tiếp theo).

Ví dụ: Thẻ <input /> có kiểu dữ liệu nhập vào dạng text

<input type="text" />

2.2 Thành phần <select></select>
Thành phần <select> dùng để tạo một danh sách thả trong Form. Sử dụng các cặp thẻ <option></option> để xác định các nội dung trong thẻ <select>
Các thuộc tính của thẻ <select>

• name: là tên của đối tượng select box
• multiple: là thuộc tính cho phép hiển thị toàn bộ danh sách các option và lựa chọn nhiều mục cùng lúc. Giá trị là “multiple”.
• Các thuộc tính của thẻ <option>
• value: là giá trị của option đó mang.
• selected: là thuộc tính option được chọn làm mặc định. Giá trị là “selected”.

Ví dụ: Tạo một danh sách thả các tỉnh thành trong cả nước (lấy 5 tỉnh thành).

<select name="city" multiple="multiple">
 <option value="HN">Hà Nội</option>
 <option value="HP">Hải Phòng</option>
 <option value="DN">Đà Nẵng</option>
 <option value="H">Huế</option>
 <option value="HCM" selected="selected">Hồ Chí Minh</option>
</select>

 2.3 Thành phần <textarea></textarea>

• Thành phần <textarea></textarea> dùng để tạo một trường nhập liệu dạng text với nhiều dòng.
• Các thuộc tính của thẻ <textarea>
• name: Tên của đối tượng Textarea
• rows: Quy định độ cao của trường Textarea. Giá trị là số nguyên dương (số dòng).
• cols: Quy định độ dài của trường Textarea. Giá trị là số nguyên dương (số ký tự trên một dòng).

Ví dụ: Tạo một trường text area có kích thước chiều rộng chứa tối đa 20 ký tự và chiều cao là 5 dòng

<textarea name="txtArea" rows="5" cols="20">
  Nội dung text area.
</textarea>

 2.4 Thành phần <button></button>

• Thành phần <button></button> dùng để tạo một nút click
• Các thuộc tính của <button>
• type: xác định kiểu của nút button (submit, reset, button).

Ví dụ: Tạo một nút click có tên là “Đăng ký”

<button type="submit">Đăng Ký</button>

Nguồn: the gioi web

SHARE THIS