Xác thực mẫu html5 là gì?

hợp thức hóa

thuộc tính novalidate được sử dụng trong thẻ biểu mẫu để tắt xác thực Biểu mẫu dựa trên HTML5. Sau khi sử dụng novalidate trong thẻ biểu mẫu, xác thực dựa trên loại và bắt buộc sẽ không hoạt động. Chúng tôi cần sử dụng xác thực biểu mẫu javascript sau khi sử dụng thuộc tính novalidate

Mẫu không có novalidate

<form>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Biểu mẫu với novalidate

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

lấy nét tự động

thuộc tính tự động lấy nét tập trung vào một điều khiển biểu mẫu duy nhất khi tải trang. lấy nét tự động chỉ có thể được sử dụng một lần trong một trang web. Đảm bảo phần tử lấy nét tự động hiển thị trên chế độ xem khi tải trang

     
<label>Search: <input type="search" autofocus></label>

            

Trình giữ chỗ

thuộc tính giữ chỗ hiển thị một số gợi ý trong kiểm soát đầu vào. Giá trị giữ chỗ sẽ biến mất khi lấy nét hoặc nhấn phím. Các điều khiển được hỗ trợ cho trình giữ chỗ là các điều khiển đầu vào và vùng văn bản. Màu mặc định của trình giữ chỗ là màu xám nhạt, tôi. e (#999)

Trình giữ chỗ trong đầu vào

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

Trình giữ chỗ trong vùng văn bản

<label>Query: <textarea placeholder="Query"><textarea></label>       
            

tự động hoàn thành

thuộc tính tự động hoàn thành có thể hiển thị hoặc ẩn bộ đệm của trình duyệt khi gõ phím. Giá trị mặc định của tính năng tự động hoàn thành được bật. Nhưng tự động hoàn thành tắt có thể vô hiệu hóa bộ nhớ cache của trình duyệt

Giá trị của tự động hoàn thành

• bật (Mặc định)
• tắt

bật tự động hoàn thành

tự động hoàn thành tắt

            
<label>Name: <input type="text" placeholder="Enter Name"></label>

<label>Name: <input type="text" placeholder="Enter Name" autocomplete="off"></label>
            

Yêu cầu

thuộc tính bắt buộc là thuộc tính boolean được sử dụng để thêm xác thực trong các điều khiển biểu mẫu như đầu vào, vùng văn bản, điều khiển radio, hộp kiểm và chọn danh sách thả xuống. Với yêu cầu, điều khiển biểu mẫu trống không thể gửi dữ liệu

Yêu cầu trong đầu vào

<form>            
<label>Name: <input type="text" placeholder="Enter Name" required><label>
</form>    
            

bắt buộc trong hộp kiểm

. Tôi đồng ý

<form>            
<label>Terms <input type="checkbox" required></label>    
</form>    
            

cần thiết trong các nút radio

. Nam giới. Giống cái

bắt buộc trong danh sách thả xuống chọn

Chọn thành phố.

<form>            
<select aria-label="City" required>
<option value="" selected disabled>--Choose City--</option>
<option>New Delhi</option>
<option>Chennai</option>
<option>Mumbai</option>
<option>Kolkata</option>
</select>
</form>    
            

Mẫu

Tạo biểu thức chính quy JavaScript cho điều khiển đầu vào và vùng văn bản. Regex có thể được sử dụng để xác thực mã pin, số thẻ ghi nợ/thẻ tín dụng, số cvv, mã pin atm, v.v.

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Độ dài nhỏ nhất

Sẽ chỉ gửi biểu mẫu khi trường này chứa đầy n ký tự tối thiểu

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Chỉ đọc

Người dùng có thể đọc một điều khiển có thuộc tính chỉ đọc, nhưng không giống như vô hiệu hóa, nó có thể gửi dữ liệu đến máy chủ web. vô hiệu hóa không thể gửi dữ liệu đến máy chủ

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

danh sách

thuộc tính danh sách được sử dụng để liên kết thẻ datalist với điều khiển đầu vào. Giá trị của datalist được hiển thị dưới dạng gợi ý trên keyup

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

số loại đầu vào

số loại đầu vào được sử dụng để chỉ chèn số từ người dùng. Ví dụ tuổi, số vv. thuộc tính tối thiểu và tối đa cũng được sử dụng với số loại đầu vào. bước có thể tăng giá trị bước, giá trị bước mặc định là 1

kiểu nhập số có thể thay đổi bố cục bàn phím trên điện thoại thông minh như Android và Iphone

Loại đầu vào Số

Nhập số bất kỳ

Loại đầu vào Số với tối thiểu và tối đa

Nhập Tuổi từ 1 đến 90

Loại đầu vào Số với bước

Chọn một thậm chí không

Chọn một số từ 1 đến 5

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Bố cục bàn phím trên Android và IOS

Loại đầu vào email

email loại đầu vào được sử dụng lấy id email từ người dùng. Mẫu mặc định cho id email là

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Bố cục bàn phím trên Android và IOS

Loại đầu vào điện thoại

loại đầu vào tel được sử dụng để chèn số điện thoại (Điện thoại cố định, điện thoại di động hoặc ảo) từ người dùng. Không có bản dựng sẵn cho số điện thoại. Chúng tôi có thể sử dụng các mẫu cụ thể theo quốc gia để xác thực

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Bố cục bàn phím trên Android và IOS

tìm kiếm loại đầu vào

tìm kiếm loại đầu vào chỉ được sử dụng cho hộp tìm kiếm. Nó trông tương tự như kiểu nhập văn bản nhưng có nút chéo tùy chọn ở bên phải trong một số trình duyệt

Tìm kiếm

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Bố cục bàn phím trên Android và IOS

url loại đầu vào

url loại đầu vào được sử dụng để nhập url trang web. Một URL phải bao gồm giao thức ( HTTP hoặc HTTPS)

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Bố cục bàn phím trên Android và IOS

Loại đầu vào ngày

ngày loại đầu vào được sử dụng chọn một ngày hợp lệ từ người dùng. Các trình duyệt Chrome, Edge, opera, Firefox, Safari, Android và IOS cũng hiển thị lịch công cụ chọn ngày ở kiểu nhập ngày, nhưng trình duyệt IE chưa hỗ trợ lịch công cụ chọn ngày

Các trình duyệt hỗ trợ kiểu nhập ngày

1. Trình duyệt Chrome
2. crom
3. Cạnh (12 trở lên)
4. viền crom
5. firefox
6. Safari ( 14 trở lên)

Trình duyệt không hỗ trợ kiểu nhập ngày

1. Safari ( 13 trở xuống)
2. IE (tất cả các phiên bản)

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Nhập loại ngày với tối thiểu và tối đa

     
<label>Search: <input type="search" autofocus></label>

            

Bố cục bàn phím trên Android và IOS

Loại đầu vào tháng

loại đầu vào tháng được sử dụng chọn một tháng hợp lệ từ người dùng. Chrome, Edge, opera, android và ios cũng hiển thị datepicker

     
<label>Search: <input type="search" autofocus></label>

            

loại đầu vào tháng với tối thiểu và tối đa

     
<label>Search: <input type="search" autofocus></label>

            

Bố cục bàn phím trên Android và IOS

Loại đầu vào tuần

loại đầu vào tuần được sử dụng chọn số tuần hợp lệ từ người dùng. Chrome, Edge, opera, android và ios cũng hiển thị công cụ chọn ngày không có tuần

     
<label>Search: <input type="search" autofocus></label>

            

loại đầu vào tuần với tối thiểu và tối đa

     
<label>Search: <input type="search" autofocus></label>

            

Bố cục bàn phím trên Android và IOS

thời gian loại đầu vào

thời gian loại đầu vào được sử dụng chọn thời gian hợp lệ từ người dùng ở định dạng 12 giờ

     
<label>Search: <input type="search" autofocus></label>

            

thời gian loại đầu vào với tối thiểu và tối đa

     
<label>Search: <input type="search" autofocus></label>

            

loại đầu vào thời gian với bước

     
<label>Search: <input type="search" autofocus></label>

            

Bố cục bàn phím trên Android và IOS

Loại đầu vào datetime-local

loại đầu vào datetime-local được sử dụng chọn ngày và giờ hợp lệ từ người dùng ở định dạng 12 giờ

     
<label>Search: <input type="search" autofocus></label>

            

loại đầu vào datetime-local với tối thiểu và tối đa

     
<label>Search: <input type="search" autofocus></label>

            

Bố cục bàn phím trên Android và IOS

Màu loại đầu vào

màu loại đầu vào được sử dụng chọn màu từ người dùng. Chrome, android và opera hiển thị bộ chọn màu nhưng các trình duyệt khác thì không

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

Bố cục bàn phím trên Android và IOS

Phạm vi loại đầu vào

phạm vi loại đầu vào được sử dụng chọn một phạm vi số. min và max được sử dụng để chỉ định giá trị phạm vi

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

phạm vi loại đầu vào với bước

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

phạm vi loại đầu vào với dấu băm

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

Thẻ đồng hồ

HTML5 Meter được sử dụng để hiển thị thước đo. Đồng hồ này sẽ có màu xanh lục nếu giá trị lớn hơn cao, màu vàng nếu giá trị nằm giữa cao và thấp và màu đỏ nếu giá trị nhỏ hơn thấp

Phát triển

Hiển thị tiến độ hoàn thành nhiệm vụ

Danh sách dữ liệu

HTML5 Datalist được sử dụng để thêm datalist với văn bản loại đầu vào

<label>Name: <input type="text" placeholder="Enter Name"></label>