Trong bài này, chúng ta sẽ học chi tiết hơn về các phần tử trong HTML Form.
Phần tử input
Phần tử input là phần tử form quan trọng nhất. Phần tử này có thể hiển thị theo nhiều cách khác nhau, tùy theo thuộc tính type. Ví dụ phần tử input hiển thị dưới dạng 1 trường nhập liệu (type=”text”).
Phần tử input với type="text" --- dammio.com:<br/> <input name="HoTen" type="text">
Nếu thuộc tính type bị thiếu thì mặc định phần tử input sẽ có type là “text” (trường nhập liệu văn bản).
Phần tử select
Phần tử select định nghĩa 1 danh sách rớt xuống (drop-down). Ví dụ chọn loại điện thoại bạn muốn mua tư danh sách drop-down sau.
<h2>Chọn điện thoại bạn muốn mua? --- dammio.com<h2/> <select name="mobiles"> <option value="samsung">SamSung X</option> <option value="iphone" selected>iPhone X</option> <option value="nokia">Nokia X</option> <option value="oppo">Oppo X</option> </select>
Trong ví dụ trên, phần tử option định nghĩa 1 lựa chọn. Theo mặc định, phần tử đầu tiên trong danh sách drop-down được chọn. Để định nghĩa lựa chọn sẽ chọn mặc định đầu tiên, bạn có thể dùng thuộc tính selected. Ở ví dụ, phần iPhone X được chọn đầu tiên do được định nghĩa bằng thuộc tính selected.
Giá trị hiển thị trong phần tử select
Chúng ta có thể dùng thuộc tính size để định nghĩa kích thước giá trị hiển thị. Ví dụ chọn size = 3 thì bạn có thể chỉ nhìn thấy nhiều hơn 1 lựa chọn cùng lúc.
<h2>Chọn điện thoại bạn muốn mua? --- dammio.com<h2/> <select name="mobiles" size="3"> <option value="samsung">SamSung X </option> <option value="iphone" selected>iPhone X</option> <option value="nokia">Nokia X</option> <option value="oppo">Oppo X</option> </select>
Cho phép nhiều lựa chọn trong phần tử select
Theo mặc định, phần tử select chỉ cho phép bạn chọn 1 giá trị lựa chọn, nếu bạn muốn chọn nhiều hơn 1 lựa chọn, bạn có thể dùng thuộc tính multiple.
<h2>Chọn điện thoại bạn muốn mua? --- dammio.com<h2/> <select name="mobiles" size="3" multiple> <option value="samsung">SamSung X </option> <option value="iphone" selected>iPhone X</option> <option value="nokia">Nokia X</option> <option value="oppo">Oppo X</option> </select>
Phần tử textarea
Phần tử này định nghĩa 1 trường nhập văn bản mới nhiều dòng (nhiều cột)
<h2>Nhập sở thích của bạn --- dammio.com</h2> <textarea name="sothich" rows="10" cols="20"> Sở thích của tôi là học lập trình web tại website dammio.com </textarea>
Trong ví dụ trên, thuộc tính rows là số dòng hiển thị và thuộc tính cols là số cột hiển thị. Ngoài cách dùng thuộc tính rows, cols để định nghĩa vùng hiển thị textarea, bạn có thể định nghĩa bằng thuộc tính width, height trong style.
<h2>Nhập sở thích của bạn --- dammio.com</h2> <textarea name="sothich" style="width:200px; height:600px"> Sở thích của tôi là học lập trình web tại website dammio.com </textarea>
Thuộc tính button
Thuộc tính button định nghĩa 1 nút nhấn trong HTML.
<button type="button" onclick="alert('Website dammio.com!')">Nhấn vào đây --- dammio.com</button>
Phần tử HTML5 datalist
Trong HTML5, phần tử datalist đặc tả một danh sách các lựa chọn có sẵn cho phần tử input. Người dùng sẽ thấy danh sách khi họ nhập dữ liệu vào phần tử input. Lưu ý là thuộc tính list của phần tử input phải trùng tên với thuộc tính id của phần tử datalist.
<h2>Chọn danh mục mà bạn yêu thích --- dammio.com.</h2> <form> <input list="danhmuc"> <datalist id="danhmuc"> <option value="Lập trình Web"> <option value="Thiết kế Web"> <option value="Tiếng Anh"> <option value="SEO"> <option value="Internet"> </datalist> </form>
Phần tử output
Phần tử output thể hiện kết quả tính toán, được thực hiện bằng JavaScript. Ví dụ thực hiện phép cộng 2 phần tử a + b với dữ liệu nhập vào.
<h2>Phép cộng a + b --- dammio.com</h2> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> a: <input type="number" id="a" name="a"><br/> b: <input type="number" id="b" name="b"></br> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form>
Kết luận: Bài viết đã trình bày cho bạn biết các phần tử Form HTML thông dụng nhất, ngoài ra còn nhiều các phần tử khác sẽ được trình bày trong các bài viết tiếp theo.
- APA:
Dammio. (2017). [HTML/HTML5] Phần 31: Các phần tử Form. https://www.dammio.com/2017/12/06/html-html5-phan-31-cac-phan-tu-form.
- BibTeX:
@misc{dammio,
author = {Dammio},
title = {[HTML/HTML5] Phần 31: Các phần tử Form},
year = {2017},
url = {https://www.dammio.com/2017/12/06/html-html5-phan-31-cac-phan-tu-form},
urldate = {2024-10-11}
}