Biểu mẫu HTML W3schools

Phần tử HTML định nghĩa một biểu mẫu được sử dụng để thu thập dữ liệu nhập của người dùng: Biểu mẫu HTML chứa các phần tử biểu mẫu.. Các phần tử biểu mẫu là các loại yếu tố đầu vào khác

Phần <form>tử HTML định nghĩa một biểu mẫu được sử dụng để thu

thập dữ liệu nhập của người dùng:

Biểu mẫu HTML chứa các phần tử biểu mẫu

Các phần tử biểu mẫu là các loại yếu tố đầu vào khác nhau, như trường

văn bản, hộp kiểm, nút radio, nút gửi và hơn thế nữa

3 Phần tử <input>

Phần <input>tử là phần tử biểu mẫu quan trọng nhất

Phần <input>tử có thể được hiển thị theo nhiều cách, tùy thuộc vào thuộc

tính type

Mickey

Mouse

Submit

Dưới đây là một số ví dụ:

<input type = "text"> Xác định trường nhập văn bản một dòng

<input type = "radio"> Xác định nút radio (để chọn một trong nhiều

lựa chọn)

<input type = "submit"> Xác định nút gửi (để gửi biểu mẫu)

Bạn sẽ tìm hiểu nhiều hơn về các kiểu đầu vào sau trong hướng dẫn này

Tên đầu tiên:

Họ:

Lưu ý: Bản thân biểu mẫu không hiển thị Cũng lưu ý rằng chiều rộng

mặc định của trường văn bản là 20 ký tự

4 Nhập nút radio

<input type="radio">định nghĩa một nút radio

Nút radio cho phép người dùng chọn MỘT trong số lượng lựa chọn giới

5 Nút Gửi

<input type="submit">xác định một nút để gửi dữ liệu biểu mẫu

tới trình xử lý biểu mẫu

Trình xử lý biểu mẫu thường là một trang máy chủ với một kịch bản để

xử lý dữ liệu đầu vào

Trình xử lý biểu mẫu được chỉ định trong thuộc tính hành động của biểu

Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:

Tên đầu tiên:

Họ:

Mickey

Mouse

G?i di

6 Thuộc tính hành động

Các actionthuộc tính định nghĩa các hành động được thực hiện khi biểu

mẫu được gửi

Thông thường, dữ liệu biểu mẫu được gửi đến một trang web trên máy

chủ khi người dùng nhấp vào nút gửi

Trong ví dụ trên, dữ liệu biểu mẫu được gửi đến một trang trên máy chủ

có tên "/action_page.php" Trang này chứa một kịch bản phía máychủ xử lý dữ liệu biểu mẫu:

<form action ="/action_page.php">

Nếu actionthuộc tính bị bỏ qua, hành động được đặt thành trang hiện tại

7 Thuộc tính mục tiêu

Các targetthuộc tính xác định nếu kết quả trình sẽ mở trong một tab trình

duyệt mới, một khung hình, hoặc trong cửa sổ hiện hành

Giá trị mặc định là " _self" có nghĩa là biểu mẫu sẽ được gửi trong cửa sổ

hiện tại

Để làm cho kết quả biểu mẫu mở trong tab trình duyệt mới, hãy sử dụng

giá trị " _blank":

Thí dụ

<form action="/action_page.php" target ="_blank">

Các giá trị pháp lý khác là " _parent", " _top" hoặc tên đại diện cho tên

của khung nội tuyến

8 Thuộc tính phương thức

Các methodthuộc tính quy định cụ thể phương thức HTTP

( GET hoặc POST ) được sử dụng khi nộp dữ liệu có dạng:

Thí dụ

<form action="/action_page.php" method ="get">

hoặc là:

Thí dụ

<form action="/action_page.php" method ="post">

9 Khi nào sử dụng GET?

Phương thức mặc định khi gửi dữ liệu biểu mẫu là GET

Tuy nhiên, khi GET được sử dụng, dữ liệu biểu mẫu đã gửi sẽ hiển thị

trong trường địa chỉ trang :

/action_page.php?firstname=Mickey&lastname=Mouse

Ghi chú về GET:

• Nối thêm dữ liệu biểu mẫu vào URL trong cặp tên / giá trị

• Độ dài của một URL bị giới hạn (khoảng 3000 ký tự)

• Không bao giờ sử dụng GET để gửi dữ liệu nhạy cảm! (sẽ hiển thị

Luôn sử dụng POST nếu dữ liệu biểu mẫu chứa thông tin nhạy cảm hoặc

thông tin cá nhân Phương thức POST không hiển thị dữ liệu biểu mẫu đã gửi trong trường địa chỉ trang

Ghi chú về POST:

• POST không có giới hạn về kích thước và có thể được sử dụng để

gửi lượng dữ liệu lớn

Tên thuộc tính

Mỗi trường nhập phải có namethuộc tính cần gửi

Nếu namethuộc tính bị bỏ qua, dữ liệu của trường nhập đó sẽ không được

10 Dữ liệu biểu mẫu nhóm với <fieldset>

Phần <fieldset>tử được sử dụng để nhóm dữ liệu có liên quan trong một

biểu mẫu

Phần <legend>tử xác định chú thích cho <fieldset> phần tử

Phần tử biểu mẫu quan trọng nhất là <input>phần tử.

Phần <input>tử có thể được hiển thị theo nhiều cách, tùy thuộc

vào type thuộc tính

Thí dụ

<input name="firstname" type="text">

Nếu typethuộc tính bị bỏ qua, trường nhập sẽ nhận loại mặc định: "văn

bản"

Tất cả các kiểu đầu vào khác nhau được đề cập trong chương tiếp theo

2. Phần tử <select>

Phần <select>tử xác định danh sách thả xuống :

Thí dụ

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

Các <option>phần tử định nghĩa một tùy chọn có thể được chọn

Theo mặc định, mục đầu tiên trong danh sách thả xuống được chọn

Để xác định tùy chọn được chọn trước, hãy thêm selectedthuộc tính vào

<select name="cars" size="3">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

Cho phép nhiều lựa chọn:

Sử dụng multiplethuộc tính để cho phép người dùng chọn nhiều giá trị:Thí dụ

<select name="cars" size="4" multiple>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

3. Phần tử <textarea>

Phần <textarea>tử xác định trường nhập nhiều dòng ( vùng văn bản ):Thí dụ

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden

Bạn cũng có thể xác định kích thước của vùng văn bản bằng cách sử

dụng CSS:

Thí dụ

<textarea name="message" style="width:200px; height:600px">

The cat was playing in the garden

Lưu ý: Luôn chỉ định thuộc tính type cho phần tử nút Các trình duyệt

khác nhau có thể sử dụng các loại mặc định khác nhau cho phần

Lưu ý: Trình duyệt không hiển thị các phần tử không xác định Các yếu

tố mới không được hỗ trợ trong các trình duyệt cũ hơn sẽ không

"phá hủy" trang web của bạn

6. Phần tử <datalist>> HTML5

Phần <datalist>tử chỉ định danh sách các tùy chọn được xác định trước

cho một <input>phần tử

Người dùng sẽ thấy danh sách thả xuống của các tùy chọn được xác định

trước khi họ nhập dữ liệu

Các listthuộc tính của <input>phần tử, phải tham khảo các idthuộc tính

của <datalist>phần tử

Thí dụ

<form action="/action_page.php">

<input list="browsers">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

</form

7. Phần tử <output> HTML5

Phần <output>tử đại diện cho kết quả của một phép tính (như một phép

tính được thực hiện bởi một tập lệnh)

Thí dụ

Thực hiện phép tính và hiển thị kết quả trong một <output>phần tử:

<form action="/action_page.php"

Chương này mô tả các kiểu đầu vào khác nhau cho phần tử <input>

<input type="text">xác định trường nhập văn bản một dòng :

Thí dụ

Tên người dùng:

Mật khẩu người dùng:

Các ký tự trong trường mật khẩu được che dấu (được hiển thị dưới dạng

dấu hoa thị hoặc hình tròn)

<input type="submit">định nghĩa một nút để gửi dữ liệu biểu mẫu

tới trình xử lý biểu mẫu

Trình xử lý biểu mẫu thường là một trang máy chủ với một kịch bản để

xử lý dữ liệu đầu vào

Trình xử lý biểu mẫu được chỉ định trong action thuộc tính của biểu

Tên đầu tiên:

<input type="reset">xác định nút đặt lại sẽ đặt lại tất cả các giá trị biểu

mẫu thành giá trị mặc định của chúng:

<input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit">

<input type="reset">

</form>

Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:

Tên đầu tiên:

Họ:

Nếu bạn thay đổi giá trị đầu vào và sau đó nhấp vào nút "Đặt lại", biểu

mẫu dữ liệu sẽ được đặt lại về giá trị mặc định

<input type="radio">định nghĩa một nút radio

Nút radio cho phép người dùng chọn CHỈ MỘT trong số lượng lựa chọn

<input type="radio" name="gender" value="female"> Female<br>

<input type="radio" name="gender" value="other"> Other

<input type="checkbox">xác định một hộp kiểm

Hộp kiểm cho phép người dùng chọn tùy chọn ZERO hoặc MORE trong

tôi có một chiếc xe đạp

tôi có một chiếc xe hơi

<input type="button">xác định một nút :

Thí dụ

<input type="button" onclick="alert('Hello World!')" value="Click

Me!">

Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:

HTML5 đã thêm một số loại đầu vào mới:

• tel

• tuần

Các kiểu nhập mới không được trình duyệt web cũ hỗ trợ, sẽ hoạt động

như <input type="text">

Các <input type="color">được sử dụng cho các lĩnh vực đầu vào mà nên

Select your favorite color:

<input type="color" name="favcolor">

Tùy thuộc vào hỗ trợ trình duyệt, bộ chọn ngày có thể hiển thị trong

Enter a date before 1980-01-01:

<input type="date" name="bday" max="1979-12-31"><br> Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02"><br>

</form>

Chỉ <input type="datetime-local">định trường nhập ngày và giờ, không

có múi giờ

Tùy thuộc vào hỗ trợ trình duyệt, bộ chọn ngày có thể hiển thị trong

trường nhập

Thí dụ

<form>

Birthday (date and time):

<input type="datetime-local" name="bdaytime">

</form

Thông tin <input type="email">được sử dụng cho các trường nhập phải

chứa địa chỉ email

Tùy thuộc vào hỗ trợ trình duyệt, địa chỉ e-mail có thể được xác nhận tự

động khi được gửi

Một số điện thoại thông minh nhận dạng loại email và thêm ".com" vào

bàn phím để khớp với đầu vào email

Định <input type="file"> nghĩa trường chọn tệp và nút "Duyệt" để tải lên

tệp

Thí dụ

Select a file: <input type="file" name="myFile">

</form>

Các <input type="month">phép người dùng lựa chọn một tháng và năm

Tùy thuộc vào hỗ trợ trình duyệt, bộ chọn ngày có thể hiển thị trong

trường nhập

Thí dụ

<form>

Birthday (month and year):

<input type="month" name="bdaymonth">

</form>

Định <input type="number">nghĩa một trường nhập số

Bạn cũng có thể đặt các hạn chế về những con số nào được chấp nhận

Ví dụ sau hiển thị trường nhập số, nơi bạn có thể nhập giá trị từ 1 đến 5:

Thí dụ

<form>

Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">

</form>

16. Giới hạn nhập

Dưới đây là danh sách một số hạn chế nhập phổ biến (một số là hạn chế

mới trong HTML5):

pattern Specifies a regular expression to check the input value against

readonly Specifies that an input field is read only (cannot be changed)

required Specifies that an input field is required (must be filled out)

step Specifies the legal number intervals for an input field

Bạn sẽ tìm hiểu thêm về các hạn chế đầu vào trong chương tiếp theo

Ví dụ sau hiển thị trường nhập số, trong đó bạn có thể nhập giá trị từ 0

đến 100, theo các bước 10 Giá trị mặc định là 30:

Định <input type="range">nghĩa một điều khiển để nhập một số có giá

trị chính xác không quan trọng (như điều khiển thanh trượt) Mặc định phạm vi là từ 0 đến 100 Tuy nhiên, bạn có thể thiết lập các hạn chế về những gì con số được chấp nhận

với min, maxvà stepcác thuộc tính:

Thí dụ

<input type="range" name="points" min="0" max="10">

</form>

Các <input type="search">được sử dụng cho các lĩnh vực tìm kiếm (một

lĩnh vực tìm kiếm hoạt động như một trường văn bản thường)

Các <input type="tel">được sử dụng cho các lĩnh vực đầu vào mà nên

chứa một số điện thoại

Lưu ý: Loại tel hiện chỉ được hỗ trợ trong Safari 8

Các <input type="time">phép người dùng lựa chọn một thời gian (không

21. Url loại nhập liệu

Các <input type="url">được sử dụng cho các lĩnh vực đầu vào mà nên

chứa một địa chỉ URL

Tùy thuộc vào hỗ trợ trình duyệt, trường url có thể được xác nhận tự

động khi được gửi

Một số điện thoại thông minh nhận dạng loại url và thêm ".com" vào bàn

phím để khớp với đầu vào url

Thí dụ

<form>

Add your homepage:

<input type="url" name="homepage">

</form>

Các <input type="week">phép người dùng lựa chọn một tuần và năm.

Tùy thuộc vào hỗ trợ trình duyệt, bộ chọn ngày có thể hiển thị trong

<form action="">

First name:<br>

<input type="text" name="firstname" value="John" readonly>

</form>

3. Thuộc tính bị vô hiệu hóa

Các disabledthuộc tính xác định rằng lĩnh vực đầu vào bị vô hiệu hóa

Trường nhập bị vô hiệu hóa không sử dụng được và không thể nhấp được

và giá trị của nó sẽ không được gửi khi gửi biểu mẫu:

Các maxlengththuộc tính không cung cấp bất kỳ thông tin phản hồi Nếu

bạn muốn cảnh báo người dùng, bạn phải viết mã JavaScript

Lưu ý: Các hạn chế đầu vào không phải là dễ dàng và JavaScript cung

cấp nhiều cách để thêm đầu vào bất hợp pháp Để hạn chế đầu vàomột cách an toàn, nó cũng phải được người nhận (máy chủ) kiểm tra!

Các autocompletethuộc tính xác định liệu một trường mẫu hoặc đầu vào

nên có autocomplete bật hoặc tắt

Khi bật tự động hoàn tất, trình duyệt tự động hoàn tất các giá trị đầu vào

dựa trên các giá trị mà người dùng đã nhập trước đó

Mẹo: Có thể tự động hoàn thành "bật" cho biểu mẫu và "tắt" cho các

trường nhập cụ thể hoặc ngược lại

Các autocompletethuộc tính làm việc với <form>và sau đây <input>loại:

văn bản, tìm kiếm, url, tel, email, mật khẩu, datepickers, phạm vi,

và màu sắc

Thí dụ

Biểu mẫu HTML có tự động điền (và tắt cho một trường nhập):

<form action="/action_page.php" autocomplete="on">

First name:<input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

Mẹo: Trong một số trình duyệt, bạn có thể cần phải kích hoạt chức năng

tự động hoàn tất để chức năng này hoạt động

Các novalidatethuộc tính là một <form>thuộc tính

Khi có mặt, novalidate chỉ định rằng dữ liệu biểu mẫu không được xác

thực khi được gửi

Thí dụ

Cho biết biểu mẫu không được xác thực khi gửi:

<form action="/action_page.php" novalidate>

E-mail: <input type="email" name="user_email">

<input type="submit">

</form>

9. Thuộc tính lấy nét tự động

Các autofocusthuộc tính xác định rằng trường nhập tự động nên được tập

trung khi tải trang

Thí dụ

Để trường nhập "Tên đầu tiên" tự động lấy tiêu điểm khi tải trang:

First name:<input type="text" name="fname" autofocus>

Các formthuộc tính định một hoặc nhiều hình thức một <input>yếu tố

thuộc về

Mẹo: Để tham khảo nhiều hơn một biểu mẫu, hãy sử dụng danh sách id

được phân tách bằng dấu cách

Thí dụ

Trường nhập nằm bên ngoài biểu mẫu HTML (nhưng vẫn là một phần

của biểu mẫu):

<form action="/action_page.php" id="form1">

First name: <input type="text" name="fname"><br>

<input type="submit" value="Submit">

</form>