Cấp bậc tác giả:

HTML

[HTML5]Web Form 2.0

Được viết bởi webmaster ngày 10/07/2014 lúc 11:05 AM
Một số kiểu input, output trong HTML5
  • 0
  • 8785

[HTML5]Web Form 2.0


Web Forms 2.0 là phần mở rộng trong HTML4. 

Các phần tử <input> trong HTML4
Các phần tử input HTML4 sử dụng kiểu thuộc tính để xác định kiểu dữ liệu. HTML4 cung cấp các kiểu sau đây:

KiểuMô tả
textTrường văn bản, trống và ngắt dòng.
passwordTrường văn bản che lại bởi các ký tự chấm đen, trống và ngắt dòng.
checkboxTập các số không hoặc nhiều giá trị từ danh sách được xác định trước.
radioGiá trị liệt kê.
submitNút form khởi tạo tiến trình bắt đầu khi nhấn
fileTập tin tùy ý định dạng MIME, và tùy chọn tên tập tin.
imageLiên quan đến kích thước hình ảnh cụ thể, với sự thêm ngữ nghĩa nó phải là giá trị cuối cùng được lựa chọn và bắt đầu trình đơn.
hiddenChuỗi tùy ý không được hiển thị cho người dùng.
selectGiá trị được liệt kê, giống như kiểu radio.
textareaTrường văn bản dạng, chưa nhiều dòng và không bị vỡ
buttonNút form khởi tạo tiến trình khi nhấn


Sau đây là ví dụ đơn giản của việc sử dụng label, các nút radio, nút submit:

...
<form action="http://example.com/cgiscript.pl" method="post">
    <p>
    <label for="firstname">first name: </label>
              <input type="text" id="firstname"><br />
    <label for="lastname">last name: </label>
              <input type="text" id="lastname"><br />
    <label for="email">email: </label>
              <input type="text" id="email"><br>
    <input type="radio" name="sex" value="male"> Male<br>
    <input type="radio" name="sex" value="female"> Female<br>
    <input type="submit" value="send"> <input type="reset">
    </p>
 </form>
 ...

Các phần tử <input> trong HTML5
Ngoài các thuộc tính được đề cập ở trên, phần tử input HTML5 giới thiệu các giá trị mới sevral cho kiểu thuộc tính. 

Chú ý: Hãy thử tất cả các ví dụ sau sử dụng phiên bản mới nhất của trình duyệt.

STTKiểuMô tả
1datetimeNgày và thời gian (năm, tháng, ngày, giờ, phút, giây, phần của giây) được mã hóa theo chuẩn ISO 8601 với múi giờ đặt thành UTC.
2datetime-localNgày và thời gian (năm, tháng, ngày, giờ, phút, giây, phần của một giây) được mã hóa theo  chuẩn ISO 8601, không có thông tin múi giờ.
3dateNgày (năm, tháng, ngày) được mã hóa theo  chuẩn ISO 8601.
4monthNgày bao gồm năm và tháng được mã hóa theo chuẩn ISO 8601.
5weekNgày bao gồm năm và số tuần được mã hóa theo chuẩn ISO 8601.
6timeThời gian (giờ, phút, giây, giây phân đoạn) được mã hóa theo chuẩn ISO 8601.
7numberChỉ chấp nhận giá trị số. Thuộc tính xác định xác thực, mặc định là 1.
8rangePhạm vi được sử dụng cho trường đầu vào nên có giá trị từ một loạt các con số.
9emailChỉ chấp nhận giá trị email. Kiểu này được sử dụng cho các trường đầu vào cần có địa chỉ e-mail. Nếu bạn cố gắng gửi văn bản đơn giản, nó buộc chỉ nhập địa chỉ email ở định dạng email@example.com.
10urlChỉ chấp nhận giá trị URL. Kiểu này được sử dụng cho các trường đầu vào cần có địa chỉ URL. Nếu bạn cố gắng để gửi văn bản đơn giản, nó buộc chỉ nhập địa chỉ URL hoặc định dạng http://www.example.com hoặc định dạng http://example.com


Các phần tử <output>
HTML5 giới thiệu phần tử <output>mới được sử dụng để đại diện cho kết quả của kiểu đầu ra, chẳng hạn như đầu ra bằng văn bản của script.

Bạn có thể sử dụng thuộc tính để xác định mối liên hệ giữa các phần tử output với phần tử khác trong văn bản có ảnh hưởng đến việc tính toán.

Thuộc tính placeholder

HTML5 giới thiệu thuộc tính mới gọi là placeholder. Thuộc tính này trên phần tử <input> và <textarea> cung cấp gợi ý cho người dùng có thể được input trong trường này. Các văn bản placeholder không được chứa kí tự xuống dòng hoặc line-feeds.

Đây là cú pháp đơn giản:

<input type="text" name="search" placeholder="search the web"/>

Thuộc tính này được hỗ trợ bởi phiên bản mới nhất của trình duyệt Mozilla, Safari và Crome.

Thuộc tính tự động lấy nét(autofocus)
Đây là mẫu đơn giản, dễ dàng lập trình JavaScript tại thời điểm tải văn bản, tự động nhấn vào trường form cụ thể.

HTML5 giới thiệu thuộc tính mới gọi là tự động lấy nét(autofocus):

<input type="text" name="search" autofocus/>

Thuộc tính này được hỗ trợ bởi phiên bản mới nhất của trình duyệt Mozilla, Safari và Crome.

Các thuộc tính cần thiết
Bây giờ bạn không cần validations của javascript cho phía client như hộp văn bản trống sẽ không bao giờ được gửi vì HTML5 giới thiệu thuộc tính mới gọi là required sẽ được sử dụng như sau và sẽ nhấn mạnh phải có giá trị:

<input type="text" name="search" required/>

Thuộc tính này được hỗ trợ bởi phiên bản mới nhất của trình duyệt Mozilla, Safari và Crome.

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML