Thẻ liên quan đến biểu mẫu
Bài viết này giải thích các thẻ liên quan đến biểu mẫu.
Điều này giải thích các trường biểu mẫu khác nhau như đầu vào văn bản và menu thả xuống.
YouTube Video
Thẻ liên quan đến biểu mẫu
Thẻ <form>
1<form action="/submit" method="post">...</form>- Thẻ
<form>được sử dụng để định nghĩa toàn bộ biểu mẫu. - Thuộc tính
actionxác định đích đến, và thuộc tínhmethodxác định phương thức (GET hoặc POST). - Bạn cũng có thể chỉ định thuộc tính
target, tương tự như thẻ<a>.
Thẻ <input> (trường nhập văn bản)
1<input type="text" name="username" placeholder="Enter your username">-
<input type="text">tạo một trường nhập văn bản một dòng. Người dùng có thể nhập bất kỳ văn bản nào. -
Thuộc tính
placeholderxác định văn bản mô tả xuất hiện khi trường nhập liệu trống. Điều này giúp người dùng dễ dàng hiểu được dữ liệu cần nhập. Văn bản này sẽ tự động biến mất khi người dùng bắt đầu nhập.placeholderthích hợp để cung cấp thông tin bổ sung và không phù hợp cho những hướng dẫn quan trọng như đầu vào bắt buộc. Trong những trường hợp như vậy, bạn nên sử dụng một nhãn.
Thẻ <input> (trường nhập mật khẩu)
1<input type="password" name="password" placeholder="Type your password here"><input type="password">tạo một trường để nhập mật khẩu. Các ký tự được nhập sẽ bị ẩn và che đi để đảm bảo an toàn.
Thẻ <input> (trường nhập địa chỉ email)
1<input type="email" name="email" placeholder="Enter your email"><input type="email">tạo một trường để nhập địa chỉ email và bao gồm kiểm tra hợp lệ để đảm bảo định dạng email đúng.
Thẻ <input> (hộp kiểm)
1<input type="checkbox" name="subscribe"> Subscribe to newsletter<input type="checkbox">tạo một checkbox. Khi có nhiều tùy chọn, người dùng có thể chọn nhiều mục.
Thẻ <input> (nút chọn)
Female
1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female<input type="radio">tạo một nút radio cho phép người dùng chọn chỉ một tùy chọn trong tập hợp.
Thẻ <input> (nút gửi)
1<input type="submit" value="Submit"><input type="submit">tạo một nút để gửi dữ liệu trong biểu mẫu.- Giá trị của thuộc tính
valueđược bao gồm trong dữ liệu biểu mẫu khi gửi.
Thẻ <input> (nút đặt lại)
1<input type="reset" value="Reset"><input type="reset">tạo một nút đặt lại tất cả các giá trị đầu vào trong biểu mẫu.
Thẻ <input> (trường ẩn)
1<input type="hidden" name="userid" value="12345"><input type="hidden">tạo một trường ẩn không hiển thị trên màn hình và được sử dụng để gửi dữ liệu đến máy chủ khi biểu mẫu được gửi.
Thẻ <input> (chọn màu)
1<input type="color" name="favcolor" value="#ff0000"><input type="color">hiển thị bộ chọn màu và tạo một trường nhập cho phép người dùng chọn màu.
Thẻ <input> (trường nhập ngày tháng)
1<input type="date" name="birthday"><input type="date">tạo một trường nhập ngày tháng hiển thị một lịch để chọn ngày.
Thẻ <input> (trường nhập thời gian)
1<input type="time" name="appointment_time"><input type="time">tạo một trường để nhập thời gian và một bộ chọn thời gian được hiển thị.
Thẻ <input> (trường nhập file)
1<input type="file" name="resume"><input type="file">tạo một trường nhập cho người dùng chọn và tải lên các tập tin.- Thuộc tính
enctypecủa thẻformphải được đặt thànhmultipart/form-data.
Thẻ <input> (số)
1<input type="number" name="quantity" min="1" max="10"><input type="number">tạo một trường nhập số cho phép thiết lập giá trị tối thiểu, giá trị tối đa và bước (lượng tăng/giảm).
Thẻ <input> (trường chọn phạm vi cho số)
1<input type="range" name="volume" min="0" max="100" value="50"><input type="range">tạo một trường nhập nơi người dùng có thể chọn một giá trị trong phạm vi bằng cách sử dụng thanh trượt.
Thẻ <textarea>
1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>- Thẻ
<textarea>tạo một trường nhập văn bản nhiều dòng. Nó thích hợp cho việc nhập văn bản dài hoặc nhận xét.
Thẻ <select>
1<select name="animal">
2 <option value="cat">Cat</option>
3 <option value="dog">Dog</option>
4</select>- Thẻ
<select>tạo một menu thả xuống, và các tùy chọn được định nghĩa với thẻ<option>. Người dùng có thể chọn một hoặc nhiều mục.
1<select name="animals" multiple>
2 <option value="cat">Cat</option>
3 <option value="dog">Dog</option>
4 <option value="bird">Bird</option>
5</select>- Để bật chọn nhiều mục, hãy thêm thuộc tính
multiple. Chỉ định thuộc tính này sẽ hiển thị các tùy chọn dưới dạng hộp danh sách.
Thẻ <optgroup>
1<select name="fruits">
2 <optgroup label="Citrus">
3 <option value="orange">Orange</option>
4 <option value="lemon">Lemon</option>
5 </optgroup>
6 <optgroup label="Berries">
7 <option value="strawberry">Strawberry</option>
8 <option value="blueberry">Blueberry</option>
9 </optgroup>
10</select>- Thẻ
<optgroup>được sử dụng để nhóm các mục liên quan lại với nhau. Thuộc tínhlabelcho phép bạn đặt tên nhóm, cung cấp các tùy chọn rõ ràng cho người dùng ngay cả khi danh sách dài.
Thẻ <label>
1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">- Thẻ
<label>định nghĩa các nhãn cho trường nhập, ô chọn và nút radio, cải thiện khả năng sử dụng và truy cập. - Ví dụ, nhấp vào một nhãn có thể làm nổi bật một trường nhập liệu hoặc chuyển đổi một checkbox bật hoặc tắt.
Thẻ <fieldset>
1<fieldset>
2 <legend>Personal Information</legend>
3 <label for="name">Name:</label>
4 <input type="text" id="name" placeholder="Enter your name">
5</fieldset>- Thẻ
<fieldset>nhóm các điều khiển biểu mẫu có liên quan, và thẻ<legend>cung cấp tiêu đề cho nhóm.
Thẻ <button>
1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>-
Thẻ
<button>định nghĩa một nút có thể nhấp để kích hoạt việc gửi biểu mẫu hoặc các hành động khác.Khi
type="button"được chỉ định, nó hoạt động như một nút thông thường. Nhấn vào nó không gửi biểu mẫu hoặc kích hoạt bất kỳ hành động nào khác theo mặc định. Nó được sử dụng khi bạn muốn đặt các hành động tùy chỉnh với JavaScript.Khi
type="submit"được chỉ định, nó hoạt động như một nút gửi biểu mẫu. Khi nút này được nhấn, biểu mẫu chứa nó sẽ được gửi đi.Khi
type="reset"được chỉ định, nó hoạt động như một nút đặt lại biểu mẫu. Nhấn vào nó sẽ đặt lại tất cả các trường nhập trong biểu mẫu và trả chúng về trạng thái ban đầu.Nếu thuộc tính
typekhông được chỉ định, một số trình duyệt có thể coi nó nhưtype="submit", vì vậy nên chỉ rõ loại để đảm bảo hành vi được mong muốn. -
Thẻ
<button>có thể bao gồm nội dung HTML khác giữa thẻ mở và thẻ đóng, cho phép tạo các nút với biểu tượng hoặc văn bản phức tạp. -
Đối với một nút gửi sử dụng thẻ
<input>, giá trị của thuộc tínhvalueđược bao gồm trong dữ liệu biểu mẫu, nhưng với thẻ<button>, nó không được gửi theo mặc định.Bằng cách chỉ định các thuộc tính
namevàvaluecho thẻ<button>, giá trị của nó có thể được gửi dưới dạng dữ liệu biểu mẫu.
Thẻ <datalist>
1<input list="browsers" name="browser">
2<datalist id="browsers">
3 <option value="Chrome">
4 <option value="Firefox">
5 <option value="Safari">
6</datalist>- Thẻ
<datalist>cung cấp danh sách các tùy chọn có thể chọn cho phần tử<input>. Người dùng có thể chọn từ danh sách hoặc nhập giá trị của riêng họ.
Thẻ <output>
1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2 <input type="range" id="a" value="50"> +
3 <input type="range" id="b" value="50"> =
4 <output name="result" for="a b">100</output>
5</form>- Thẻ
<output>hiển thị kết quả của các tính toán hoặc tương tác của người dùng. Nó được sử dụng để hiển thị kết quả tính toán động trong các biểu mẫu hoặc kịch bản. - Đối với thuộc tính
for, hãy chỉ định các ID của các phần tử biểu mẫu mà bạn muốn liên kết, cách nhau bởi dấu cách.
Thẻ <progress>
1<progress value="70" max="100">70%</progress>- Thẻ
<progress>cho người dùng thấy tiến độ của một nhiệm vụ. Ví dụ, nó có thể chỉ thị trực quan tiến độ tải xuống hoặc cài đặt tệp.
Thẻ <meter>
1<meter value="0.6">60%</meter>- Thẻ
<meter>biểu thị một đo lường số trong một phạm vi đã biết. Nó được sử dụng để hiển thị các đo lường như sử dụng đĩa hoặc đồng hồ nhiên liệu trong một phạm vi cụ thể.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.