Khám phá cách sử dụng biểu mẫu trong HTML và tất cả các thẻ thành phần biểu mẫu
Biểu mẫu là cách bạn có thể tương tác với một trang hoặc một ứng dụng, được xây dựng bằng công nghệ Web.
Bạn có một tập hợp các điều khiển và khi bạn gửi biểu mẫu, bằng một cú nhấp chuột vào nút “gửi” hoặc theo chương trình, trình duyệt sẽ gửi dữ liệu đến máy chủ.
Theo mặc định, việc gửi dữ liệu này khiến trang tải lại sau khi dữ liệu được gửi, nhưng bằng cách sử dụng JavaScript, bạn có thể thay đổi hành vi này (sẽ không giải thích cách thực hiện trong sách này).
Một biểu mẫu được tạo bằng cách sử dụngformnhãn:
<form>
...
</form>Theo mặc định, các biểu mẫu được gửi bằng phương thức GET HTTP. Cái nào cũng có nhược điểm và thường thì bạn muốn sử dụng POST.
Bạn có thể đặt biểu mẫu để sử dụng POST khi được gửi bằng cách sử dụngmethodthuộc tính:
<form method="POST">
...
</form>Biểu mẫu được gửi, bằng cách sử dụng GET hoặc POST, đến cùng một URL nơi nó cư trú.
Vì vậy, nếu biểu mẫu ởhttps://flaviocopes.com/contacts, nhấn nút “gửi” sẽ yêu cầu đến cùng một URL đó.
Điều này có thể dẫn đến không có gì xảy ra.
Bạn cần một thứ gì đó phía máy chủ để xử lý yêu cầu và thông thường bạn “lắng nghe” các sự kiện gửi biểu mẫu đó trên một URL dành riêng.
Bạn có thể chỉ định URL thông quaactiontham số:
<form action="/new-contact" method="POST">
...
</form>Điều này sẽ khiến trình duyệt gửi dữ liệu biểu mẫu bằng cách sử dụng POST đến/new-contactURL trên cùng một nguồn gốc.
Nếu nguồn gốc (giao thức + miền + cổng) làhttps://flaviocopes.com(cổng 80 là mặc định), điều này có nghĩa là dữ liệu biểu mẫu sẽ được gửi đếnhttps://flaviocopes.com/new-contact.
Tôi đã nói về dữ liệu. Dữ liệu nào?
Dữ liệu được cung cấp bởi người dùng thông qua tập hợp kiểm soát có sẵn trên nền tảng Web:
- hộp nhập liệu (văn bản một dòng)
- vùng văn bản (văn bản nhiều dòng)
- hộp chọn (chọn một tùy chọn từ menu thả xuống)
- nút radio (chọn một tùy chọn từ danh sách luôn hiển thị)
- hộp kiểm (chọn không, một hoặc nhiều tùy chọn)
- tải lên tệp
- và hơn thế nữa!
Hãy giới thiệu từng người trong số chúng trong phần tổng quan về các trường biểu mẫu sau đây.
Cácinputnhãn
Cácinputtrường là một trong những phần tử biểu mẫu được sử dụng rộng rãi nhất. Nó cũng là một yếu tố rất linh hoạt và nó có thể thay đổi hoàn toàn hành vi dựa trêntypethuộc tính.
Hành vi mặc định là điều khiển nhập văn bản một dòng:
<input />Tương đương với việc sử dụng:
<input type="text" />Như với tất cả các trường khác tiếp theo, bạn cần đặt tên cho trường để nội dung của nó được gửi đến máy chủ khi biểu mẫu được gửi:
<input type="text" name="username" />Cácplaceholderthuộc tính được sử dụng để hiển thị văn bản, có màu xám nhạt, khi trường trống. Hữu ích để thêm một gợi ý cho người dùng về những gì cần nhập:
<input type="text" name="username" placeholder="Your username" />Sử dụngtype="email"sẽ xác thực phía máy khách (trong trình duyệt) email về tính đúng đắn (tính đúng ngữ nghĩa, không đảm bảo địa chỉ email tồn tại) trước khi gửi.
<input type="email" name="email" placeholder="Your email" />Mật khẩu
Sử dụngtype="password"sẽ làm cho mọi khóa được nhập xuất hiện dưới dạng dấu hoa thị (*) hoặc dấu chấm, hữu ích cho các trường lưu trữ mật khẩu.
<input type="password" name="password" placeholder="Your password" />Con số
Bạn có thể có một phần tử đầu vào chỉ chấp nhận các số:
<input type="number" name="age" placeholder="Your age" />Bạn có thể chỉ định giá trị tối thiểu và tối đa được chấp nhận:
<input type="number" name="age" placeholder="Your age" min="18" max="110" />Cácstepthuộc tính giúp xác định các bước giữa các giá trị khác nhau. Ví dụ: điều này chấp nhận giá trị từ 10 đến 50, ở các bước 5:
<input type="number" name="a-number" min="10" max="50" step="5" />Giấu trang
Các trường có thể bị ẩn khỏi người dùng. Chúng sẽ vẫn được gửi đến máy chủ sau khi gửi biểu mẫu:
<input type="hidden" name="some-hidden-field" value="some-value" />Điều này thường được sử dụng để lưu trữ các giá trị như mã thông báo CSRF, được sử dụng để bảo mật và nhận dạng người dùng hoặc thậm chí để phát hiện rô bốt gửi thư rác, sử dụng các kỹ thuật đặc biệt.
Nó cũng có thể được sử dụng để xác định một biểu mẫu và hành động của nó.
Đặt giá trị mặc định
Tất cả các trường đó đều chấp nhận một giá trị được xác định trước. Nếu người dùng không thay đổi nó, đây sẽ là giá trị được gửi đến máy chủ:
<input type="number" name="age" value="18" />Nếu bạn đặt trình giữ chỗ, giá trị đó sẽ xuất hiện nếu người dùng xóa giá trị trường đầu vào:
<input type="number" name="age" placeholder="Your age" value="18" />Gửi biểu mẫu
Cáctype="submit"trường là một nút, một khi người dùng nhấn, sẽ gửi biểu mẫu:
<input type="submit">Cácvaluethuộc tính đặt văn bản trên nút, nếu thiếu sẽ hiển thị văn bản "Gửi":
<input type="submit" value="Click me">Xác thực biểu mẫu
Các trình duyệt cung cấp chức năng xác thực phía máy khách cho các biểu mẫu.
Bạn có thể đặt các trường theo yêu cầu, đảm bảo chúng được lấp đầy và thực thi một định dạng cụ thể cho đầu vào của mỗi trường.
Hãy xem cả hai tùy chọn.
Đặt các trường theo yêu cầu
Cácrequiredthuộc tính giúp bạn xác nhận. Nếu trường không được đặt, xác thực phía máy khách không thành công và trình duyệt không gửi biểu mẫu:
<input type="text" name="username" required />Thực thi một định dạng cụ thể
Tôi đã mô tảtype="email"trường trên. Nó tự động xác nhận địa chỉ email theo một định dạng được thiết lập trong thông số kỹ thuật.
bên trongtype="number"trường, tôi đã đề cập đếnminvàmaxđể giới hạn các giá trị được nhập vào một khoảng thời gian.
Bạn có thể làm nhiều hơn thế.
Bạn có thể thực thi một định dạng cụ thể trên bất kỳ trường nào.
Cácpatternthuộc tính cung cấp cho bạn khả năng đặt một biểu thức chính quy để xác thực giá trị dựa trên.
Tôi khuyên bạn nên đọc Hướng dẫn về Cụm từ Thông dụng của tôi tạiflaviocopes.com/javascript-regular-expressions/.
pattern = “https: //.*”
<input type="text" name="username" pattern="[a-zA-Z]{8}" />Các lĩnh vực khác
Tải lên tệp
Bạn có thể tải các tệp từ máy tính cục bộ của mình và gửi chúng đến máy chủ bằng cách sử dụngtype="file"phần tử đầu vào:
<input type="file" name="secret-documents">Bạn có thể đính kèm nhiều tệp:
<input type="file" name="secret-documents" multiple>Bạn có thể chỉ định một hoặc nhiều loại tệp được phép sử dụngacceptthuộc tính. Điều này chấp nhận hình ảnh:
<input type="file" name="secret-documents" accept="image/*">Bạn có thể sử dụng một loại MIME cụ thể, nhưapplication/jsonhoặc đặt một phần mở rộng tệp như.pdf. Hoặc đặt nhiều phần mở rộng tệp, như sau:
<input type="file" name="secret-documents" accept=".jpg, .jpeg, .png">nút
Cáctype="button"Các trường đầu vào có thể được sử dụng để thêm các nút bổ sung vào biểu mẫu, không phải là các nút gửi:
<input type="button" value="Click me">Chúng được sử dụng để lập trình làm điều gì đó, sử dụng JavaScript.
Có một trường đặc biệt được hiển thị dưới dạng nút, có hành động đặc biệt là xóa toàn bộ biểu mẫu và đưa trạng thái của các trường trở lại trạng thái ban đầu:
<input type="reset">Các nút radio
Các nút radio được sử dụng để tạo một tập hợp các lựa chọn, trong đó một nút được nhấn và tất cả các nút khác bị tắt.
Cái tên này xuất phát từ những chiếc radio ô tô cũ có kiểu giao diện này.
Bạn xác định một tập hợptype="radio"đầu vào, tất cả đều giống nhaunamethuộc tính và khác nhauvaluethuộc tính:
<input type="radio" name="color" value="yellow">
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">Sau khi biểu mẫu được gửi,colorthuộc tính dữ liệu sẽ có một giá trị duy nhất.
Luôn luôn có một phần tử được kiểm tra. Mục đầu tiên là mục được chọn theo mặc định.
Bạn có thể đặt giá trị được chọn trước bằng cách sử dụngcheckedthuộc tính. Bạn chỉ có thể sử dụng nó một lần cho mỗi nhóm đầu vào radio.
Hộp kiểm
Tương tự như hộp radio, nhưng chúng cho phép chọn nhiều giá trị hoặc không có giá trị nào cả.
Bạn xác định một tập hợptype="checkbox"đầu vào, tất cả đều giống nhaunamethuộc tính và khác nhauvaluethuộc tính:
<input type="checkbox" name="color" value="yellow">
<input type="checkbox" name="color" value="red">
<input type="checkbox" name="color" value="blue">Tất cả các hộp kiểm đó sẽ được bỏ chọn theo mặc định. Sử dụngcheckedđể kích hoạt chúng khi tải trang.
Vì trường đầu vào này cho phép nhiều giá trị, sau khi gửi biểu mẫu, (các) giá trị sẽ được gửi đến máy chủ dưới dạng một mảng.
Ngày và giờ
Chúng tôi có một số kiểu đầu vào để chấp nhận các giá trị ngày tháng.
Cáctype="date"trường đầu vào cho phép người dùng nhập ngày và hiển thị bộ chọn ngày nếu cần:
<input type="date" name="birthday">Cáctype="time"trường đầu vào cho phép người dùng nhập thời gian và hiển thị bộ chọn thời gian nếu cần:
<input type="time" name="time-to-pickup">Cáctype="month"trường đầu vào cho phép người dùng nhập một tháng và một năm:
<input type="month" name="choose-release-month">Cáctype="week"trường đầu vào cho phép người dùng nhập một tuần và một năm:
<input type="week" name="choose-week">Tất cả các trường đó cho phép giới hạn phạm vi và bước giữa mỗi giá trị. Tôi khuyên bạn nên kiểm tra MDN để biết chi tiết nhỏ về cách sử dụng của chúng.
Cáctype="datetime-local"trường cho phép bạn chọn ngày và giờ.
<input type="datetime-local" name="date-and-time">Đây là một trang để kiểm tra tất cả chúng:https://codepen.io/flaviocopes/pen/ZdWQPm
Bộ chọn màu
Bạn có thể cho phép người dùng chọn màu bằng cách sử dụngtype="color"thành phần:
<input type="color" name="car-color">Bạn đặt một giá trị mặc định bằng cách sử dụngvaluethuộc tính:
<input type="color" name="car-color" value="#000000">Trình duyệt sẽ quan tâm đến việc hiển thị bộ chọn màu cho người dùng.
Phạm vi
Phần tử đầu vào này hiển thị một phần tử thanh trượt. Mọi người có thể sử dụng nó để chuyển từ giá trị bắt đầu sang giá trị kết thúc:
<input type="range" name="age" min="0" max="100" value="30">Bạn có thể cung cấp một bước tùy chọn:
<input type="range" name="age" min="0" max="100" value="30" step="10">Điện thoại
Cáctype="tel"trường đầu vào được sử dụng để nhập số điện thoại:
<input type="tel" name="telephone-number">Điểm bán hàng chính để sử dụngtelkết thúctexttrên thiết bị di động, nơi thiết bị có thể chọn hiển thị bàn phím số.
Chỉ định mộtpatternthuộc tính để xác thực bổ sung:
<input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="telephone-number">URL
Cáctype="url"trường được sử dụng để nhập URL.
<input type="url" name="website">Bạn có thể xác nhận nó bằng cách sử dụngpatternthuộc tính:
<input type="url" name="website" pattern="https://.*">Cáctextareanhãn
Cáctextareaphần tử cho phép người dùng nhập văn bản nhiều dòng. So vớiinput, nó yêu cầu một thẻ kết thúc:
<textarea></textarea>Bạn có thể đặt thứ nguyên bằng cách sử dụng CSS, nhưng cũng có thể sử dụngrowsvàcolsthuộc tính:
<textarea rows="20" cols="10"></textarea>Như với các thẻ biểu mẫu khác,namethuộc tính xác định tên trong dữ liệu được gửi đến máy chủ:
<textarea name="article"></textarea>Cácselectnhãn
Thẻ này được sử dụng để tạo menu thả xuống.
Người dùng có thể chọn một trong các tùy chọn có sẵn.
Mỗi tùy chọn được tạo bằng cách sử dụngoptionnhãn. Bạn thêm tên cho lựa chọn và giá trị cho mỗi tùy chọn:
<select name="color">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>Bạn có thể đặt một tùy chọn bị vô hiệu hóa:
<select name="color">
<option value="red" disabled>Red</option>
<option value="yellow">Yellow</option>
</select>Bạn có thể có một tùy chọn trống:
<select name="color">
<option value="">None</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>Các tùy chọn có thể được nhóm lại bằng cách sử dụngoptgroupnhãn. Mỗi nhóm tùy chọn có mộtlabelthuộc tính:
<select name="color">
<optgroup label="Primary">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</optgroup>
<optgroup label="Others">
<option value="green">Green</option>
<option value="pink">Pink</option>
</optgroup>
</select>Tải xuống miễn phí của tôiSổ tay HTML
Các hướng dẫn html khác:
- Giới thiệu về HTML
- Thẻ HTML `iframe`
- Biểu mẫu HTML
- Thẻ HTML `video`
- Thẻ HTML `audio`
- Các thẻ HTML cho văn bản
- Bảng HTML
- Thẻ HTML `img`
- Thẻ HTML `a`
- Thẻ HTML `ảnh`
- Thẻ HTML `figure`
- Thẻ vùng chứa HTML
- Khả năng truy cập trên Web
- Cách tạo bình luận trong HTML
- Cách thay đổi URL hình ảnh HTML ở chế độ tối
- Hình ảnh đáp ứng bằng cách sử dụng `srcset`
- Thay đổi biểu tượng yêu thích ở chế độ tối