The post Thuộc tính trong thẻ Input appeared first on WebVN.
]]>Thuộc tính value được sử dụng để thiết lập giá trị cho thẻ input:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action=""> Họ:<br> <input type="text" name="firstname" value="Nguyen"> <br> Tên:<br> <input type="text" name="lastname"> </form> </body> </html> |
Thuộc tính readonly
Thuộc tính readonly quy định giá trị trong thẻ input chỉ được dùng để hiển thị (không thể thay đổi):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action=""> Họ:<br> <input type="text" name="firstname" value ="Nguyen" readonly> <br> Tên:<br> <input type="text" name="lastname"> </form> </body> </html> |
Thuộc tính readonly không cần giá trị. Bạn cũng có thể viết readonly=”readonly”, hai cách đều như nhau.
Thuộc tính disabled
Thuộc tính disabled được sử dụng để vô hiệu hóa một thẻ input.
Khi thuộc tính này được thiết lập, bạn không thể nhấn hay sử dụng thẻ.
Những thông tin trong thẻ có thuộc tính disabled sẽ không được gửi đi khi submit.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action=""> Họ:<br> <input type="text" name="firstname" value ="Nguyen" disabled> <br> Tên:<br> <input type="text" name="lastname"> </form> </body> </html> |
Thuộc tính disabled không cần giá trị. Bạn cũng có thể viết disabled=”disabled”, hai cách đều như nhau.
Thuộc tính size
Thuộc tính size được sử dụng để thiết lập chiều dài (đơn vị là ký tự) của một thẻ input:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action=""> Họ:<br> <input type="text" name="firstname" value ="Nguyen" size="40"> <br> Tên:<br> <input type="text" name="lastname"> </form> </body> </html> |
Thuộc tính maxlength
Thuộc tính maxlength được sử dụng để thiết lập số ký tự tối đa cho một thẻ input:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action=""> Họ:<br> <input type="text" name="firstname" maxlength="10"> <br> Tên:<br> <input type="text" name="lastname"> </form> </body> </html> |
Khi thiết lập thuộc tính maxlength, thẻ input sẽ bỏ qua các ký tự vượt quá số được thiết lập.
Thuộc tính maxlength không cung cấp thêm bất kỳ thiết lập nào khác. Nếu bạn muốn cảnh báo người dùng đã sử dụng hết số ký tự cho phép, bạn phải sử dụng JavaScript.
Để việc nhận thông tin từ người dùng được an toàn, bạn phải kiểm tra lại một lần nữa trên máy chủ (bằng php, asp…).
Thuộc tính trong HTML5
HTML5 thêm một số thuộc tính cho thẻ <input>:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
và một số thuộc tính mới cho thẻ <form>:
- autocomplete
- novalidate
Thuộc tính autocomplete
Thuộc tính autocomplete quy định một form hoặc một thẻ input trong form có được sử dụng chức năng tự động điền, gợi ý thông tin hay không.
Khi thuộc tính autocomplete có giá trị “on”, trình duyệt sẽ tự động gợi ý những giá trị dựa trên thông tin người dùng nhập vào.
Mẹo: Bạn có thể thiết lập giá autocomplete là “on” cho thẻ form và “off” cho một vài thẻ input hoặc ngược lại.
Thuộc tính autocomplete có thể sử dụng trong thẻ <form> và thẻ <input> với các kiểu: text, search, url, tel, email, password, datepickers, range và color.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php" autocomplete="on"> Họ:<input type="text" name="fname"><br> Tên: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit" value="Gửi"> </form> <p>Điền thông tin vào form và nhấn "Gửi", sau đó mở lại trang và thử nháy kép (hoặc điền một vài ký tự) vào ô nhập liệu để thấy thuộc tính autocomplete hoạt động như thế nào.</p> <p>Lưu ý rằng thuộc tính autocomplete có giá trị "on" với form nhưng lại "off" ở phần e-mail.</p> </body> </html> |
Thuộc tính novalidate
novalidate là một thuộc tính của thẻ <form>.
Khi thêm thuộc tính novalidate, dữ liệu trong form sẽ không bị kiểm tra trước khi gửi đi.
Thuộc tính novalidate không được hỗ trợ trên trình duyệt Internet Explorer 9 (cùng với các phiên bản trước) và Safari.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit" value="Gửi"> </form> <p><strong>Lưu ý:</strong> Thuộc tính novalidate không được hỗ trợ trên trình duyệt Internet Explorer 9 (cùng với các phiên bản trước) và Safari.</p> </body> </html> |
Thuộc tính autofocus
Khi thuộc tính autofocus được thiết lập, trình duyệt sẽ tự động chuyển con trỏ tới thẻ <input> chứa thuộc tính.
Thuộc tính autofocus trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ:<input type="text" name="fname" autofocus><br> Tên: <input type="text" name="lname"><br> <input type="submit" value="Gửi"> </form> <p><strong>Lưu ý:</strong> Thuộc tính autofocus trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính form
Thuộc tính form cho phép một thẻ input thuộc về một hoặc nhiều form khác nhau.
Mẹo: Để một thẻ input thuộc nhiều form, sử dụng dấu cách trong danh sách các id của form.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php" id="form1"> Họ: <input type="text" name="fname"><br> <input type="submit" value="Gửi"> </form> <p>Ô "Tên" mặc dù nằm ở ngoài form nhưng vẫn là một phần của form.</p> Tên: <input type="text" name="lname" form="form1"> </body> </html> |
Thuộc tính formaction
Thuộc tính formaction quy định địa chỉ trang sẽ xử lý dữ liệu khi submit form.
Thuộc tính formaction sẽ ghi đè giá trị của thuộc tính action trong thẻ <form>.
Thuộc tính formaction được sử dụng với type=”submit” và type=”image”.
Thuộc tính formaction trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ: <input type="text" name="fname"><br> Tên: <input type="text" name="lname"><br> <input type="submit" value="Gửi"><br> <input type="submit" formaction="/demo/demo_admin.php" value="Gửi tới trang admin"> </form> <p><strong>Lưu ý:</strong> Thuộc tính formaction trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính formenctype
Thuộc tính formenctype quy định cách dữ liệu trong form sẽ được mã hóa khi gửi thông tin lên máy chủ (chỉ dành cho form có thuộc tính method=”post”).
Thuộc tính formenctype sẽ ghi đè giá trị của thuộc tính enctype trong thẻ <form>.
Thuộc tính formenctype được sử dụng với type=”submit” và type=”image”.
Thuộc tính formenctype trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action="/demo/demo_post_enctype.php" method="post"> Tên: <input type="text" name="fname"><br> <input type="submit" value="Gửi"> <input type="submit" formenctype="multipart/form-data" value="Gửi với kiểu mã hóa Multipart/form-data"> </form> <p><strong>Lưu ý:</strong> Thuộc tính formenctype trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính formmethod
Thuộc tính formmethod quy định phương thức gửi dữ liệu từ form tới máy chủ.
Thuộc tính formmethod sẽ ghi đè giá trị của thuộc tính method trong thẻ <form>.
Thuộc tính formmethod được sử dụng với type=”submit” và type=”image”.
Thuộc tính formmethod trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php" method="get"> Họ: <input type="text" name="fname"><br> Tên: <input type="text" name="lname"><br> <input type="submit" value="Gửi"> <input type="submit" formmethod="post" formaction="/demo/demo_post.php" value="Gửi với phương thức POST"> </form> <p><strong>Lưu ý:</strong> Thuộc tính formmethod trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính formnovalidate
Khi thêm thuộc tính formnovalidate, dữ liệu trong form sẽ không bị kiểm tra trước khi gửi đi.
Thuộc tính formnovalidate sẽ ghi đè giá trị của thuộc tính novalidate trong thẻ <form>.
Thuộc tính formnovalidate được sử dụng với type=”submit”.
Thuộc tính formnovalidate trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> E-mail: <input type="email" name="email"><br> <input type="submit" value="Gửi"><br> <input type="submit" formnovalidate value="Gửi - không kiểm tra email"> </form> <p><strong>Lưu ý:</strong> Thuộc tính formnovalidate trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính formtarget
Thuộc tính formtarget quy định cửa sổ trình duyệt sẽ hiển thị phản hồi từ máy chủ khi submit form.
Thuộc tính formtarget sẽ ghi đè giá trị của thuộc tính target trong thẻ <form>.
Thuộc tính formtarget được sử dụng với type=”submit” và type=”image”.
Thuộc tính formtarget trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ: <input type="text" name="fname"><br> Tên: <input type="text" name="lname"><br> <input type="submit" value="Gửi"> <input type="submit" formtarget="_blank" value="Gửi trên cửa sổ/tab mới"> </form> <p><strong>Lưu ý:</strong> Thuộc tính formtarget trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính height và width
Thuộc tính height và width quy định chiều dài và chiều cao của một thẻ <input>.
Thuộc tính height và width chỉ được sử dụng trong thẻ <input type=”image”>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ: <input type="text" name="fname"><br> Tên: <input type="text" name="lname"><br> <input type="image" src="/wp-content/uploads/2015/09/img_submit.gif" alt="Submit" width="48" height="48"> </form> <p><b>Lưu ý:</b> Thẻ input type="image" sẽ gửi tọa độ X và Y của chuột trên ảnh khi người dùng nhấn submit.</p> </body> </html> |
Thuộc tính list
Thuộc tính list trỏ tới dữ liệu đã được chuẩn bị sẵn trong thẻ <datalist> để đưa ra một số gợi ý khi người dùng nhập liệu trong thẻ <input>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> Thẻ datalist chưa được hỗ trợ trên Safari và IE9 (gồm cả các phiên bản trước đó).</p> </body> </html> |
Thuộc tính min và max
Thuộc tính min và max quy định giá trị tối thiểu và tối đa mà người dùng có thể nhập vào thẻ <input>.
Thuộc tính min, max được sử dụng trong thẻ input với các type có giá trị: number, range, date, datetime, datetime-local, month, time và week.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Nhập ngày trước 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Nhập ngày sau 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> Số lượng (từ 1 tới 5): <input type="number" name="quantity" min="1" max="5"><br> <input type="submit" value="Gửi"> </form> <p><strong>Lưu ý:</strong> Thuộc tính max và min không được hỗ trợ trong các phiên bản từ Internet Explorer 9 trở về trước.</p> <p><strong>Lưu ý:</strong> Internet Explorer 10 có hỗ trợ thẻ input với giá trị type là date và time nhưng không hỗ trợ thuộc tính min, max. IE 10 trở đi không hỗ trợ những thẻ input này.</p> </body> </html> |
Thuộc tính multiple
Thuộc tính multiple được sử dụng để cho phép người dùng chọn một hoăc nhiều giá trị trong thẻ <input>.
Thuộc tính multiple được sử dung trong thẻ input với các type có giá trị: email và file.
Thuộc tính multiple trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Chọn tệp tin: <input type="file" name="img" multiple> <input type="submit" value="Gửi"> </form> <p>Bạn có thể chọn nhiều tệp tin cùng lúc.</p> <p><strong>Lưu ý:</strong> Thuộc tính multiple trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính pattern
Thuộc tính pattern được sử dụng để thiết lập điều kiện cho giá trị nhập vào thẻ <input> (sử dụng biểu thức chính quy – regular expression).
Thuộc tính pattern được sử dung trong thẻ input với các type có giá trị: text, search, url, tel, email và password.
Mẹo: Sử dụng thuộc tính title để miêu tả về các điều kiện trong thẻ input, giúp người dùng dễ dàng hơn trong việc nhập liệu.
Mẹo: Bạn có thể tìm hiểu thêm về regular expressions trong các bài về JavaScript.
Thuộc tính pattern trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Safari.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Nhập mã quốc gia: <input type="text" name="country_code" pattern="[A-Za-z]{2}" title="Mã quốc gia gồm 2 ký tự"> <input type="submit" value="Gửi"> </form> <p><strong>Lưu ý:</strong> Thuộc tính pattern trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Safari.</p> </body> </html> |
Thuộc tính placeholder
Thuộc tính placeholder được sử dụng để đưa ra những gợi ý cho người dùng trước khi nhập liệu vào thẻ.
Thuộc tính placeholder được sử dung trong thẻ input với các type có giá trị: text, search, url, tel, email và password.
Thuộc tính placeholder trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <input type="text" name="fname" placeholder="Họ"><br> <input type="text" name="lname" placeholder="Tên"><br> <input type="submit" value="Gửi"> </form> <p><strong>Note:</strong> Thuộc tính placeholder trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính required
Thuộc tính required được sử dụng để quy định một thẻ bắt buộc phải nhập nội dung trước khi submit form.
Thuộc tính required được sử dung trong thẻ input với các type có giá trị: text, search, url, tel, email, password, date pickers, number, checkbox, radio và file.
Thuộc tính required trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Safari.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Tên: <input type="text" name="usrname" required> <input type="submit" value="Gửi"> </form> <p><strong>Note:</strong> Thuộc tính required trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Safari.</p> </body> </html> |
Thuộc tính step
Thuộc tính step quy định dữ liệu nhập vào phải là bộ số của một số.
Ví dụ: nếu step=”3″, số hợp lệ được nhập vào là -3, 0, 3, 6, …
Mẹo: Thuộc tính step có thể kết hợp với thuộc tính max, min để tạo ra vùng giá trị hợp lệ.
Thuộc tính step được sử dung trong thẻ input với các type có giá trị: number, range, date, datetime, datetime-local, month, time và week.
Thuộc tính step trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Firefox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <input type="number" name="points" step="3"> <input type="submit" value="Gửi"> </form> <p><strong>Lưu ý:</strong> Thuộc tính step trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Firefox.</p> </body> </html> |
Bài tập
Bài tập 1 Bài tập 2 Bài tập 3 Bài tập 4The post Thuộc tính trong thẻ Input appeared first on WebVN.
]]>The post Thẻ input trong HTML appeared first on WebVN.
]]>Bài này sẽ đề cập đến tất cả các giá trị của thuộc tính type trong thẻ input.
Kiểu text
<input type=”text”> tạo ra một dòng giúp người dùng nhập liệu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <form> Họ:<br> <input type="text" name="firstname"> <br> Tên:<br> <input type="text" name="lastname"> </form> <p>Lưu ý: mặc định bản thân form không hiển thị ra bên ngoài, chỉ các thành phần trong form hiển thị.</p> <p>Chiều dài khung nhập liệu kiểu text mặc định là 20 ký tự.</p> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Họ:
Tên:
Kiểu password
<input type=”password”> tạo ra một dòng để người dùng nhập mật khẩu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <form action=""> Tên đăng nhập:<br> <input type="text" name="userid"> <br> Mật khẩu:<br> <input type="password" name="psw"> </form> <p>Những ký tự trong ô mật khẩu sẽ được che đi (bằng dấu hoa thị hoặc chấm tròn).</p> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Tên đăng nhập:
Mật khẩu:
Kiểu submit
<input type=”submit”> giúp bạn tạo một nút nhấn để gửi thông tin mà người dùng đã nhập vào.
Những thông tin này sau đó sẽ được gửi tới máy chủ để xử lý và trả về kết quả.
Thuộc tính action của form sẽ quyết định thông tin được gửi đi đâu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ:<br> <input type="text" name="firstname" value="Nguyen"> <br> Tên:<br> <input type="text" name="lastname" value="A"> <br><br> <input type="submit" value="Gửi"> </form> <p>Nếu bạn nhấn vào nút "Gửi", dữ liệu trong form sẽ được chuyển tới trang "action_page.php".</p> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Nếu thiếu giá trị value trong thẻ input subit, nút sẽ lấy giá trị mặc định:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ:<br> <input type="text" name="firstname" value="Nguyen"> <br> Tên:<br> <input type="text" name="lastname" value="A"> <br><br> <input type="submit"> </form> </body> </html> |
Kiểu radio
<input type=”radio”> giúp bạn tạo một nút nhấn radio.
Nút radio chỉ cho phép người dùng chọn MỘT trong số các lựa chọn:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <form> <input type="radio" name="sex" value="male" checked>Nam <br> <input type="radio" name="sex" value="female">Nữ </form> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Nam
Nữ
Kiểu checkbox
<input type=”checkbox”> giúp bạn tạo một ô tích giá trị.
Người dùng có thể chọn nhiều hơn một giá trị hoặc không chọn giá trị nào.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <input type="checkbox" name="vehicle1" value="Bike"> Tôi có một chiếc xe đạp <br> <input type="checkbox" name="vehicle2" value="Car"> Tôi có một chiếc ô tô <br><br> <input type="submit" value="Gửi"> </form> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Thẻ <button>
Thẻ <button> được sử dụng để tạo nút nhấn:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <button type="button" onclick="alert('Chào mừng bạn đến với thẻ button!')">Nhấn vào đây!</button> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Các kiểu input trong HTML5
HTML5 đã thêm những kiểu input sau:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Kiểu number
Thẻ <input type=”number”> tạo ô nhập liệu chỉ có giá trị là số.
Bạn có thể thiết lập điều kiện các số được nhập vào.
Những điều kiện của bạn có được áp dụng hay không thì còn tùy thuộc vào sự hỗ trợ của trình duyệt.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <p> Phụ thuộc vào sự hỗ trợ của trình duyệt:<br> Mà những điều kiện của bạn có được áp dụng hay không. </p> <form action="/demo/action_page.php"> Nhập vào số từ 1 đến 5: <input type="number" name="number" min="1" max="5"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="number" không được hỗ trợ trong trình duyệt từ IE9 trở về trước.</p> </body> </html> |
Điều kiện trong thẻ input
Dưới đây là danh sách các điều kiện phổ biến được sử dụng trong thẻ input (có một vài điều kiện mới thuộc HTML5):
| Thuộc tính | Miêu tả |
|---|---|
| disabled | Khóa thẻ input |
max  | Giá trị lớn nhất có thể nhập vào trong thẻ input |
| maxlength | Số ký tự tối đa có thể nhập vào trong thẻ input |
| min | Giá trị nhỏ nhất có thể nhập vào trong thẻ input |
| pattern | Kiểm tra dự liệu nhập vào có đúng theo định dạng mẫu hay không |
| readonly | Dữ liệu chỉ có tác dụng hiển thị (không thể thay đổi) |
| required | Ô nhập liệu bắt buộc (không được bỏ trống) |
| size | Quy định chiều dài của khung nhập liệu (đơn vị là ký tự, không phải px) |
| step | Quy định mức nhảy cho ô nhập liệu (dự liệu nhập vào phải là bội số của step) |
| value | Thiết lập giá trị mặc định của ô nhập liệu |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <p> Phụ thuộc vào sự hỗ trợ của trình duyệt:<br> Các bước nhảy số có được áp dụng hay không. </p> <form action="/demo/action_page.php"> Nhập số: <input type="number" name="points" min="0" max="100" step="10" value="30"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="number" không được hỗ trợ trong trình duyệt từ IE9 trở về trước.</p> </body> </html> |
Kiểu date
Thẻ <input type=”date”> tạo ô nhập liệu chỉ có giá trị là ngày tháng.
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn ngày tháng trong phần nhập liệu.
Kiểu date chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <p> Nếu trình duyệt hỗ trợ:<br> Bạn sẽ nhìn thấy khung chọn ngày tháng trong phần nhập liệu. </p> <form action="/demo/action_page.php"> Ngày sinh: <input type="date" name="bday"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="date" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.</p> </body> </html> |
Ngoài ra, bạn có thể thêm một số điều kiện khi nhập ngày tháng:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Nhập ngày sinh trước 01/01/1980:<br> <input type="date" name="bday" max="1979-12-31"><br><br> Nhập ngày sinh sau 01/01/2000:<br> <input type="date" name="bday" min="2000-01-02"><br><br> <input type="submit" value="Gửi"> </form> <p><strong>Lưu ý:</strong> type="date" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.</p> </body> </html> |
Kiểu color
Thẻ <input type=”color”> tạo ô nhập liệu chỉ chứa giá trị là màu.
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn màu trong phần nhập liệu.
Kiểu color chưa được hỗ trợ trong trình duyệt Internet Explorer và Safari.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <p> Nếu trình duyệt hỗ trợ:<br> Bạn sẽ nhìn thấy khung chọn màu trong phần nhập liệu. </p> <form action="/demo/action_page.php"> Chọn màu yêu thích của bạn: <input type="color" name="favcolor" value="#ff0000"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="color" chưa được hỗ trợ trong trình duyệt Internet Explorer và Safari.</p> </body> </html> |
Kiểu range
Thẻ <input type=”range”> tạo ô nhập liệu chỉ chứa giá trị trong một khoảng nhất định.
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy thanh kéo thay vì ô nhập liệu.
Kiểu range không được hỗ trợ trong các trình duyệt Internet Explorer 9 trở về trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <body> <p> Nếu trình duyệt hỗ trợ:<br> bạn sẽ nhìn thấy thanh kéo thay vì ô nhập liệu. </p> <form action="/demo/action_page.php" method="get"> Điểm: <input type="range" name="points" min="0" max="10"> <input type="submit" value="Gửi"> </form> <p> <b>Lưu ý:</b> type="range" không được hỗ trợ trong các trình duyệt Internet Explorer 9 trở về trước. </p> </body> </html> |
Bạn có thể thêm một số điều kiện trong thẻ input range như: min, max, step, value.
Kiểu month
Thẻ <input type=”month”> tạo ô nhập liệu cho phép người dùng chọn tháng và năm.
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn tháng năm trong phần nhập liệu.
Kiểu month chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <p> Nếu trình duyệt hỗ trợ:<br> Bạn sẽ nhìn thấy khung chọn tháng năm. </p> <form action="/demo/action_page.php"> Nhập ngày sinh (tháng và năm): <input type="month" name="bdaymonth"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="month" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox. </p> </body> </html> |
Kiểu week
Thẻ <input type=”week”> tạo ô nhập liệu cho phép người dùng chọn tuần trong năm.
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn tuần trong năm ở phần nhập liệu.
Kiểu week chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <p> Nếu trình duyệt hỗ trợ:<br> Bạn sẽ nhìn thấy khung tuần và năm. </p> <form action="/demo/action_page.php"> Chọn tuần: <input type="week" name="year_week"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="week" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox. </p> </body> </html> |
Kiểu time
Thẻ <input type=”time”> tạo ô nhập liệu cho phép người dùng chọn thời gian (không có múi giờ).
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn thời gian trong phần nhập liệu.
Kiểu time chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <p> Nếu trình duyệt hỗ trợ:<br> Bạn sẽ nhìn thấy khung chọn thời gian. </p> <form action="/demo/action_page.php"> Chọn thời gian: <input type="time" name="usr_time"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="time" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox. </p> </body> </html> |
Kiểu datetime
Thẻ <input type=”datetime”> tạo ô nhập liệu cho phép người dùng chọn thời gian và ngày tháng (có múi giờ).
Kiểu datetime-local
Thẻ <input type=”datetime-local”> tạo ô nhập liệu cho phép người dùng chọn thời gian và ngày tháng (không có múi giờ).
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn thời gian và ngày tháng trong phần nhập liệu.
Kiểu datetime-local chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <p> Nếu trình duyệt hỗ trợ:<br> Bạn sẽ nhìn thấy khung chọn thời gian và ngày tháng. </p> <form action="/demo/action_page.php"> Chọn ngày sinh (thời gian và ngày tháng): <input type="datetime-local" name="bdaytime"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="datetime-local" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox. </p> </body> </html> |
Kiểu email
Thẻ <input type=”email”> tạo ô nhập liệu chỉ chứa giá trị là email.
Nếu trình duyệt hỗ trợ, địa chỉ email sẽ tự động được kiểm tra khi nhấn submit.
Một số điện thoại thông minh có thể nhận dạng kiểu email và thêm nút “.com” trên bàn phím ảo.
Kiểu email không được hỗ trợ trong trình duyệt Internet Explorer 9 (cùng các phiên bản trước đó) và Safari.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Nhập E-mail: <input type="email" name="email"> <input type="submit" value="Gửi"> </form> <p> <b>Lưu ý:</b>type="email" không được hỗ trợ trong trình duyệt Internet Explorer 9 (cùng các phiên bản trước đó) và Safari.</p> </body> </html> |
Kiểu search
Thẻ <input type=”search”> tạo ô nhập liệu tìm kiếm.
Kiểu search không được hỗ trợ trong trình duyệt Internet Explorer, Firefox và Opera.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Từ khóa tìm kiếm: <input type="search" name="keyword"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="search" chưa được hỗ trợ trong trình duyệt Internet Explorer, Firefox và Opera. </p> </body> </html> |
Kiểu tel
Thẻ <input type=”tel”> tạo ô nhập liệu chỉ chứa giá trị là số điện thoại.
Hiện tại kiểu tel chỉ được hỗ trợ trên trình duyệt Safari 8.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Số điện thoại: <input type="tel" name="usrtel"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="tel" chỉ được hỗ trợ trên trình duyệt Safari 8.</p> </body> </html> |
Kiểu url
Thẻ <input type=”url”> tạo ô nhập liệu chỉ chứa giá trị là địa chỉ web.
Nếu trình duyệt hỗ trợ, địa chỉ sẽ tự động được kiểm tra khi nhấn submit.
Một số điện thoại thông minh có thể nhận dạng kiểu url và thêm nút “.com” trên bàn phím ảo.
Kiểu url không được hỗ trợ trong trình duyệt Internet Explorer 9 (cùng các phiên bản trước đó) và Safari.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Địa chỉ website của bạn: <input type="url" name="homepage"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="url" không được hỗ trợ trong trình duyệt Internet Explorer 9 (cùng các phiên bản trước đó) và Safari.</p> </body> </html> |
Bài tập
Bài tập 1 Bài tập 2 Bài tập 3 Bài tập 4 Bài tập 5The post Thẻ input trong HTML appeared first on WebVN.
]]>The post Các thẻ trong form HTML appeared first on WebVN.
]]>Thẻ <input>
<input> là thẻ quan trọng nhất trong form.
Cùng một thẻ <input> nhưng tùy thuộc vào thuộc tính type mà cho ra rất nhiều cách hiển thị cũng như sự tương tác khác nhau với người dùng.
Thẻ <select>
Thẻ <select> được sử dụng để tạo danh sách thả xuống:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit" value="Gửi"> </form> </body> </html> |
Thẻ <option> được sử dụng để tạo các lựa chọn trong danh sách.
Mặc định, lựa chọn đầu tiên sẽ được hiển thị khi truy cập trang.
Bạn có thể sử dụng thuộc tính selected để thay đổi lựa chọn mặc định.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <p>Bạn có thể thay đổi lựa chọn mặc định bằng thuộc tính selected.</p> <form action="/demo/action_page.php"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit" value="Gửi"> </form> </body> </html> |
Thẻ <textarea>
Thẻ <textarea> được sử dụng để tạo khung nhập liệu gồm nhiều dòng:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <textarea name="message" rows="10" cols="30"> Bạn có thể nhập nội dung gồm nhiều dòng. </textarea> <br><br> <input type="submit" value="Gửi"> </form> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Thẻ <button>
Thẻ <button> được sử dụng để tạo nút nhấn:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <button type="button" onclick="alert('Chào mừng bạn đến với thẻ button!')">Nhấn vào đây!</button> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Các thẻ trong HTML5
HTML5 đã thêm một số thẻ mới vào trong form:
- <datalist>
- <keygen>
- <output>
Thẻ <datalist> trong HTML5
Thẻ <datalist> được sử dụng để tạo các lựa chọn gợi ý cho thẻ <input>.
Người dùng sẽ nhìn thấy một danh sách thả xuống trước khi bắt đầu nhập dữ liệu.
Thuộc tính list trong thẻ <input> phải trùng với thuộc tính id trong thẻ <datalist>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> Thẻ datalist chưa được hỗ trợ trên Safari và IE9 (gồm cả các phiên bản trước đó).</p> </body> </html> |
Thẻ <keygen> trong HTML5
Mục đích của thẻ <keygen> là xác thực người dùng một cách an toàn.
Thẻ <keygen> sẽ tạo ra một cặp-khóa (key-pair) trong form.
Khi dữ liệu trong form được gửi đi, 2 khóa được tạo ra, một private và một public.
Khóa private được lưu trữ ở trên máy còn khóa public được gửi đến máy chủ.
Khóa public có thể được sử dụng để tạo ra chứng chỉ để xác thực người dùng về sau.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Tên đăng nhập: <br> <input type="text" name="user"> <br><br> Mã hóa: <br> <keygen name="security"> <br><br> <input type="submit" value="Gửi"> </form> </body> </html> |
Thẻ <output> trong HTML5
Thẻ <output> được sử dụng để hiển thị kết quả của một phép tính.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit" value="Gửi"> </form> </body> </html> |
Các thẻ trong form
= Thẻ mới trong HTML5
| Thẻ | Miêu tả |
|---|---|
| form | Tạo một form để người dùng nhập liệu |
| input | Tạo khung dữ liệu để người dùng thao tác |
| textarea | Tạo khung nhập liệu nhiều dòng |
| label | Tạo nhãn cho thẻ input |
| fieldset | Nhóm những dữ liệu có liên quan tới nhau vào một form |
| legend | Đặt tên các nhóm dữ liệu trong thẻ fieldset |
| select | Tạo danh sách thả xuống |
| optgroup | Tạo nhóm trong danh sách thả xuống |
| option | Tạo lựa chọn trong danh sách thả xuống |
| button | Tạo một nút nhấn |
| datalist | Tạo các lựa chọn gợi ý cho thẻ input |
| keygen | Tạo cặp khóa (key-pair) trong form |
| output | Hiển thị kết quả của một phép tính |
The post Các thẻ trong form HTML appeared first on WebVN.
]]>The post Form trong HTML appeared first on WebVN.
]]>Thẻ form trong HTML được sử dụng để lấy các thông tin do người dùng nhập vào.
Để tạo một form trong HTML, chúng ta sử dụng thẻ <form> như sau:
<form> . Các thành phần trong form . </form>
Thẻ <input>
<input> là thẻ quan trọng nhất trong form.
Cùng một thẻ <input> nhưng tùy thuộc vào thuộc tính type mà cho ra rất nhiều cách hiển thị cũng như sự tương tác khác nhau với người dùng.
Đây là những kiểu type mà chúng ta sẽ sử dụng trong bài:
| Kiểu | Miêu tả |
|---|---|
| text | Ô để người dùng nhập liệu |
| radio | Tạo một nút radio (nhiều chọn một) |
| submit | Tạo một nút submit (gửi thông tin từ form đi) |
Kiểu Text
<input type=”text”> giúp bạn tạo một khung để người dùng nhập dữ liệu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <form> Họ:<br> <input type="text" name="firstname"> <br> Tên:<br> <input type="text" name="lastname"> </form> <p>Lưu ý: mặc định bản thân form không hiển thị ra bên ngoài, chỉ các thành phần trong form hiển thị.</p> <p>Chiều dài khung nhập liệu kiểu text mặc định là 20 ký tự.</p> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Họ:
Tên:
Lưu ý: Mặc định, bản thân thẻ form không hiển thị ra ngoài và chiều dài khung nhập liệu kiểu text là 20 ký tự.
Kiểu radio
<input type=”radio”> giúp bạn tạo một nút nhấn radio.
Nút radio chỉ cho phép người dùng chọn MỘT trong số các lựa chọn:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <form> <input type="radio" name="sex" value="male" checked>Nam <br> <input type="radio" name="sex" value="female">Nữ </form> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Nam
Nữ
Kiểu submit
<input type=”submit”> giúp bạn tạo một nút nhấn để gửi thông tin mà người dùng đã nhập vào.
Những thông tin này sau đó sẽ được gửi tới máy chủ để xử lý và trả về kết quả.
Thuộc tính action của form sẽ quyết định thông tin được gửi đi đâu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ:<br> <input type="text" name="firstname" value="Nguyen"> <br> Tên:<br> <input type="text" name="lastname" value="A"> <br><br> <input type="submit" value="Gửi"> </form> <p>Nếu bạn nhấn vào nút "Gửi", dữ liệu trong form sẽ được chuyển tới trang "action_page.php".</p> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Thuộc tính action
Thuộc tính action xác định địa chỉ mà thông tin sẽ được gửi đi để xử lý.
Cách phổ biến nhất để người dùng gửi thông tin từ form lên máy chủ là nhấn vào nút submit.
Bình thường, thông tin sẽ được gửi tới một trang cụ thể trên máy chủ.
Trong ví dụ ở trên, trang xử lý đã được quy định trong thẻ form:
<form action="/demo/action_page.php">
Nếu thuộc tính action không được thiết lập, mặc định thông tin sẽ được gửi tới trang hiện tại.
Thuộc tính method
Thuộc tính method quy định phương thức (POST hoặc GET) dữ liệu sẽ được chuyển đi khi người dùng nhấn nút submit trong form:
<form action="/demo/action_page.php" method="GET">
hoặc
<form action="/demo/action_page.php" method="POST">
Khi nào sử dụng GET
GET là phương thức mặc định, sử dụng khi form không có chứa những thông tin quan trọng, ví dụ như khi tìm kiếm.
Khi bạn sử dụng GET, toàn bộ dữ liệu trong form sẽ hiển thị trên thanh địa chỉ:
action_page.php?firstname=Nguyen&lastname=A
Khi nào sử dụng POST
Bạn nên sử dụng phương thức POST khi form dùng để cập nhật dữ liệu hoặc chứa những thông tin nhạy cảm (như mật khẩu).
POST bảo mật hơn vì dữ liệu chuyển đi không hiển thị trên thanh địa chỉ.
Thuộc tính name
Để thông tin gửi đi chính xác, mỗi thẻ input cần phải thiết lập thuộc tính name.
Trong ví dụ dưới đây, khi submit chỉ có dữ liệu có name là “lastname” được gửi đi:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ:<br> <input type="text" value="Nguyen"> <br> Tên:<br> <input type="text" name="lastname" value="A"> <br><br> <input type="submit" value="Gửi"> </form> <p>Sau khi bạn nhấn "Gửi", dữ liệu sẽ được gửi tới trang "action_page.php".</p> <p>Họ sẽ không được gửi đi khi nhấn submit bởi vì thẻ input này không có thuộc tính name.</p> </body> </html> |
Phân nhóm dữ liệu với thẻ <fieldset>
Thẻ <fieldset> dùng để nhóm những dữ liệu có liên quan tới nhau vào một form.
Thẻ <legend>dùng để đặt tên các nhóm dữ liệu trong thẻ <fieldset>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <fieldset> <legend>Thông tin cá nhân:</legend> Họ:<br> <input type="text" name="firstname" value="Nguyen"> <br> Tên:<br> <input type="text" name="lastname" value="A"> <br><br> <input type="submit" value="Gửi"> </fieldset> </form> </body> </html> |
Các thuộc tính khác trong form
Thẻ <form> trong HTML khi thiết lập hết tất cả các thuộc tính sẽ giống như dưới đây:
<form action="/demo/action_page.php" method="GET" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . các thành phần trong form . </form>
Danh sách các thuộc tính trong form:
| Thuộc tính | Miêu tả |
|---|---|
| accept-charset | Quy định bộ mã ký tự khi gửi thông tin đi (mặc định: sử dụng mã ký tự của trang). |
| action | Quy định địa chỉ (url) nhận dữ liệu khi submit form (mặc định: gửi tới trang hiện tại). |
| autocomplete | Dùng để lưu những dự liệu đã nhập, lần sau bạn chỉ cần chọn dữ liệu thay vì nhập lại từ đâu (mặc định: on). |
| enctype | Quy định kiểu mã hóa khi gửi dữ liệu (mặc định: url-encoded). |
| method | Quy định phương thức gửi dữ liệu khi submit form (mặc định: GET). |
| name | Quy định tên để nhận dạng dữ liệu. |
| novalidate | Thông báo với trình duyệt không cần kiểm tra tính hợp lệ của dữ liệu trong form. |
| target | Quy định cửa sổ trình duyệt sẽ nhận dữ liệu (mặc định: _self). |
The post Form trong HTML appeared first on WebVN.
]]>