Tham gia khóa học này và tìm hiểu về hoạt động bên trong của một Form HTML! Tìm hiểu cách tạo Form của riêng bạn và tích hợp xác thực HTML5.
Phần tử <form> HTML được sử dụng để thu thập và gửi thông tin đến một nguồn bên ngoài.
<form>có thể chứa các yếu tố đầu vào khác nhau. Khi người dùng gửi Form, thông tin trong các phần tử đầu vào này được chuyển đến nguồn có tên trong action thuộc tính của Form. Hãy cùng W3seo tìm hiểu về các thẻ này.
Form HTML
Giới thiệu về Form HTML
Form là một phần của cuộc sống hàng ngày. Khi chúng ta sử dụng một hình thức chuyển thông tin trong cuộc sống thực, chúng ta viết ra thông tin và đưa nó cho ai đó xử lý. Hãy nghĩ đến những lần bạn phải điền thông tin cho các đơn xin việc khác nhau như công việc, tài khoản ngân hàng hoặc bỏ thẻ gợi ý đã hoàn thành – mỗi trường hợp là một Form!
Cũng giống như dạng vật lý, một <form> phần tử HTML có nhiệm vụ thu thập thông tin để gửi đi nơi khác. Mỗi khi duyệt internet, chúng ta tiếp xúc với nhiều hình thức và thậm chí chúng ta có thể không nhận ra. Có một cơ hội tốt là nếu bạn đang nhập vào một trường văn bản hoặc cung cấp một đầu vào, thì trường mà bạn đang nhập là một phần của a <form>!
Trong bài học này, chúng ta sẽ xem xét cấu trúc và cú pháp của a <form>và nhiều phần tử chứa nó.
Cách thức hoạt động của một Form
Chúng ta có thể coi Internet như một mạng lưới các máy tính gửi và nhận thông tin. Máy tính cần một yêu cầu HTTP để biết cách giao tiếp. Yêu cầu HTTP hướng dẫn máy tính nhận cách xử lý thông tin đến. Có thể tìm thấy thêm thông tin trong bài viết của chúng tôi về các yêu cầu HTTP .
Phần <form>là một công cụ tuyệt vời để thu thập thông tin, nhưng sau đó chúng ta cần gửi thông tin đó đến một nơi khác để xử lý. Chúng ta cần cung cấp cho <form>phần tử cả vị trí của <form>thông tin và yêu cầu HTTP cần thực hiện.
Input tag trong Form
Nếu chúng tôi muốn tạo một trường đầu vào của chúng tôi <form>, chúng tôi sẽ cần sự trợ giúp của <input>tag phần tử.
Phần <input>tử có một type thuộc tính xác định cách nó hiển thị trên trang web và loại dữ liệu mà nó có thể chấp nhận.
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">nhập tên </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="email">Nhập Email: </label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-example">
<input type="submit" value="Subscribe!">
</div>
</form>Giá trị đầu tiên cho type thuộc tính mà chúng ta sẽ khám phá là “text”. Khi chúng tôi tạo một <input>phần tử type=”text”, nó sẽ hiển thị một trường văn bản mà người dùng có thể nhập vào. Điều quan trọng là chúng tôi phải bao gồm một name thuộc tính cho <input>- không có name thuộc tính, thông tin trong thuộc tính <input>sẽ không được gửi khi <form>được gửi.
Thêm label
Trong bài tập trước, chúng ta đã tạo một <input>phần tử nhưng chúng ta không đưa vào bất cứ thứ gì để giải thích nó <input>được sử dụng để làm gì. Để người dùng xác định đúng một phần tử, <input>chúng tôi sử dụng <label>phần tử được đặt tên thích hợp .
<div>
<label for="cheese">bạn có thích phô mai</label>
<input type="checkbox" name="cheese" id="cheese">
</div>Phần <label>tử có thẻ mở và thẻ đóng và hiển thị văn bản được viết giữa thẻ mở và thẻ đóng. Để liên kết a <label>và an <input>, <input>cần có một id thuộc tính.
Nhập mật khẩu
Hãy nghĩ về tất cả những lần chúng ta phải đặt thông tin nhạy cảm, như mật khẩu hoặc mã PIN, vào một <form>. Chúng tôi sẽ không muốn thông tin của chúng tôi bị nhìn thấy bởi bất kỳ ai nhìn trộm qua vai chúng tôi! May mắn thay, chúng tôi có type=”password”thuộc tính cho <input>!
Một <input type =”password”>phần tử sẽ thay thế văn bản đầu vào bằng một ký tự khác như dấu hoa thị (*) hoặc dấu chấm (•). Đoạn mã dưới đây cung cấp một ví dụ về cách tạo trường mật khẩu:
<form> <label for="user-password">Password: </label> <input type="password" id="user-password" name="user-password"> </form>
Input number
Bây giờ chúng ta đã xem xét hai typer thuộc tính <input>liên quan đến văn bản. Tuy nhiên, chúng tôi có thể muốn người dùng của mình nhập một số – trong trường hợp đó, chúng tôi có thể đặt type thuộc tính thành… (bạn đoán vậy)… “number”!
<label for="test">Nhập vào số ngẫu nhiên từ 10 đến 100:</label>
<input type="number" id="test" name="test"
min="10" max="100">Bằng cách thiết lập type=”number”cho một <input>chúng ta có thể hạn chế những gì người dùng gõ vào trường đầu vào chỉ số (và một vài ký tự đặc biệt như -, +và .). Chúng tôi cũng có thể cung cấp một step thuộc tính tạo ra các mũi tên bên trong trường đầu vào để tăng hoặc giảm giá trị của step thuộc tính. Dưới đây là mã cần thiết để hiển thị trường đầu vào cho các số:
Input range phạm vi
<div>
<input type="years" id="years" name="years" step="1">
<label for="years">years</label>
</div>Sử dụng dấu <input type=”number”> là tuyệt vời nếu chúng tôi muốn cho phép người dùng nhập bất kỳ số nào họ chọn. Tuy nhiên, nếu chúng tôi muốn giới hạn số lượng mà người dùng của chúng tôi có thể nhập, chúng tôi có thể cân nhắc sử dụng một type giá trị khác . Một tùy chọn khác chúng ta có thể sử dụng được thiết lập type để “range”mà tạo ra một thanh trượt.
Để đặt giá trị tối thiểu và tối đa của thanh trượt, chúng tôi gán giá trị cho thuộc tính min và max của <input>. Chúng tôi cũng có thể kiểm soát mức độ trơn tru và linh hoạt của thanh trượt bằng cách gán cho step thuộc tính một giá trị. Các step giá trị nhỏ hơn sẽ làm cho thanh trượt trôi chảy hơn, trong khi các step giá trị lớn hơn sẽ làm cho thanh trượt di chuyển dễ dàng hơn. Hãy xem mã để tạo thanh trượt:
<div>
<input type="range" id="cowbell" name="cowbell" min="0" max="100" value="90" step="10">
<label for="cowbell">Cowbell</label>
</div>input validate
Cho đến nay, các loại đầu vào mà chúng tôi cho phép đều là những lựa chọn đơn lẻ. Nhưng, điều gì sẽ xảy ra nếu chúng tôi đưa ra nhiều tùy chọn cho người dùng và cho phép họ chọn bất kỳ tùy chọn nào? Có vẻ như chúng ta có thể sử dụng hộp kiểm! Trong một, <form>chúng tôi sẽ sử dụng <input>phần tử và tập hợp type=”checkbox”. Kiểm tra mã được sử dụng để tạo nhiều hộp kiểm:
<form> <p>Choose your pizza toppings:</p> <label for="cheese">Extra cheese</label> <input id="cheese" name="topping" type="checkbox" value="cheese"> <br> <label for="pepperoni">Pepperoni</label> <input id="pepperoni" name="topping" type="checkbox" value="pepperoni"> <br> <label for="anchovy">Anchovy</label> <input id="anchovy" name="topping" type="checkbox" value="anchovy"> </form>
Input radio button
Hộp kiểm hoạt động tốt nếu chúng tôi muốn cung cấp cho người dùng nhiều tùy chọn và để họ chọn một hoặc nhiều tùy chọn. Tuy nhiên, có những trường hợp chúng tôi muốn đưa ra nhiều tùy chọn và chỉ cho phép một lựa chọn – như hỏi người dùng xem họ đồng ý hay không đồng ý với các điều khoản và điều kiện. Hãy xem qua mã được sử dụng để tạo các nút radio:
<form> <p>What is sum of 1 + 1?</p> <input type="radio" id="two" name="answer" value="2"> <label for="two">2</label> <input type="radio" id="eleven" name="answer" value="11"> <label for="eleven">11</label> </form>
Combobox trong HTML
Các nút radio rất tuyệt nếu chúng ta muốn người dùng chọn một tùy chọn trong số một vài tùy chọn hiển thị, nhưng hãy tưởng tượng nếu chúng ta có toàn bộ danh sách tùy chọn! Tình trạng này có thể nhanh chóng dẫn đến rất nhiều nút radio để theo dõi.
Một giải pháp thay thế là sử dụng combobox để cho phép người dùng của chúng tôi chọn một tùy chọn từ danh sách có tổ chức. Đây là mã để tạo menu thả xuống:
<form>
<label for="lunch">What's for lunch?</label>
<select id="lunch" name="lunch">
<option value="pizza">Pizza</option>
<option value="curry">Curry</option>
<option value="salad">Salad</option>
<option value="ramen">Ramen</option>
<option value="tacos">Tacos</option>
</select>
</form>Đầu vào Datalist
Ngay cả khi chúng tôi có một danh sách thả xuống có tổ chức, nếu danh sách có nhiều tùy chọn, người dùng có thể cảm thấy nhàm chán khi cuộn qua toàn bộ danh sách để tìm một tùy chọn. Đó là nơi mà việc sử dụng <datalist>phần tử trở nên hữu ích.
Các <datalist>được sử dụng với một <input type=”text”>phần tử. Trường này <input>tạo ra một trường văn bản mà người dùng có thể nhập và lọc các tùy chọn từ <datalist>. Hãy xem qua một ví dụ cụ thể:
<form>
<label for="city">Ideal city to visit?</label>
<input type="text" list="cities" id="city" name="city">
<datalist id="cities">
<option value="New York City"></option>
<option value="Tokyo"></option>
<option value="Barcelona"></option>
<option value="Mexico City"></option>
<option value="Melbourne"></option>
<option value="Other"></option>
</datalist>
</form>Lưu ý, trong đoạn mã trên, chúng ta có một <input>có một listthuộc tính. Các <input>được liên kết với thuộc tính <datalist>via <input>’s listvà thuộc tính idcủa <datalist>.
Phần tử Textarea
Một <input>phần tử với type=”text”tạo ra một trường nhập hàng đơn để người dùng nhập thông tin. Tuy nhiên, có những trường hợp người dùng cần viết thêm thông tin, chẳng hạn như một bài đăng trên blog. Trong những trường hợp như vậy, thay vì sử dụng một <input>, chúng tôi có thể sử dụng <textarea>.
Phần <textarea>tử được sử dụng để tạo trường văn bản lớn hơn để người dùng viết nhiều văn bản hơn. Chúng tôi có thể thêm các thuộc tính rows và cols để xác định số lượng hàng và cột cho <textarea>. Hãy xem:
<form> <label for="blog">New Blog Post: </label> <textarea id="blog" name="blog" rows="5″ cols="30″> </textarea> </form>
Submit Form
Hãy nhớ rằng, mục đích của Form là thu thập thông tin sẽ được gửi. Đó là vai trò của nút gửi – người dùng nhấp vào nút đó khi họ hoàn tất việc điền thông tin vào <form>và họ đã sẵn sàng gửi đi. Bây giờ chúng ta đã xem qua cách tạo các phần tử đầu vào khác nhau, bây giờ chúng ta hãy xem cách tạo một nút gửi!
Để thực hiện một nút gửi trong một <form>, chúng ta sẽ sử dụng đáng tin cậy <input>phần tử và thiết lập type để “submit”.
<div class="form-example">
<input type="submit" value="SEND!">
</div>Các thuộc tính của form trong html
Trong HTML, thẻ form có các thuộc tính sau:
- action: Định nghĩa đường dẫn đến trang web hoặc script xử lý dữ liệu khi người dùng gửi form.
- method: Định nghĩa phương thức gửi dữ liệu (GET hoặc POST).
- enctype: Định nghĩa kiểu mã hóa dữ liệu gửi đi.
- name: Định nghĩa tên của form.
- target: Định nghĩa mục tiêu của form, ví dụ như _blank để mở trong tab mới.
- autocomplete: Định nghĩa xem trình duyệt có tự động hoàn thành dữ liệu nhập hay không.
- novalidate: Định nghĩa xem form có được kiểm tra hay không trước khi gửi.
- accept-charset: Định nghĩa bộ ký tự cho phép nhập vào form.
- onsubmit: Định nghĩa sự kiện khi người dùng gửi form.
- onreset: Định nghĩa sự kiện khi người dùng reset form.
Ví dụ :
<form action="/submit" method="post" name="myForm" novalidate> <!-- form content goes here --> </form>
Cần lưu ý rằng, không phải tất cả các trình duyệt hỗ trợ tất cả các thuộc tính của thẻ form. Cũng cần chú ý rằng, các thuộc tính của form cũng cần được sử dụng đúng với mục đích và nhằm đảm bảo tính bảo mật và hiệu quả của form.
Cũng cần lưu ý rằng, trong HTML5 có thêm các thuộc tính mới như “required” và “pattern” để hỗ trợ kiểm tra dữ liệu nhập vào trước khi gửi, giúp cho việc xử lý dữ liệu trở nên dễ dàng hơn.
Các ví dụ form trong html
Ví dụ 1: Form đăng nhập
<form action="/login" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <input type="submit" value="Login"> </form>
Ví dụ 2: Form đăng ký
<form action="/register" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <label for="password_confirm">Confirm Password:</label> <input type="password" id="password_confirm" name="password_confirm" required><br><br> <input type="submit" value="Register"> </form>
Ví dụ 3: Form tìm kiếm
<form action="/search" method="get"> <label for="query">Search:</label> <input type="text" id="query" name="query" required><br><br> <input type="submit" value="Search"> </form>
Ví dụ 4: Form đặt hàng
<form action="/order" method="post">
<label for="product">Product:</label>
<select id="product" name="product" required>
<option value="">Select Product</option>
<option value="product1">Product 1</option>
<option value="product2">Product 2</option>
<option value="product3">Product 3</option>
</select>
<br><br>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" required><br><br>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea><br><br>
<input type="submit" value="Place Order">
</form>Các ví dụ trên chỉ là các ví dụ cơ bản và có thể có nhiều kiểu input và thuộc tính khác nhau để tạo ra một form phù hợp với yêu cầu.
Kiểm tra dữ liệu trong Form HTML
Bạn đã bao giờ tự hỏi làm thế nào một trang đăng nhập thực sự hoạt động? Hoặc tại sao sự kết hợp của tên người dùng và mật khẩu lại cho phép bạn truy cập vào một trang web? Câu trả lời nằm ở sự xác nhận . Xác thực là khái niệm kiểm tra dữ liệu do người dùng cung cấp so với dữ liệu được yêu cầu.
Có nhiều loại xác nhận khác nhau. Một loại là xác thực phía máy chủ , điều này xảy ra khi dữ liệu được gửi đến một máy khác (thường là máy chủ) để xác thực. Một ví dụ về kiểu xác thực này là việc sử dụng trang đăng nhập. Biểu mẫu trên trang đăng nhập chấp nhận nhập tên người dùng và mật khẩu, sau đó gửi dữ liệu đến máy chủ để kiểm tra xem cặp có khớp chính xác hay không.
Mặt khác, chúng tôi sử dụng xác thực phía máy khách nếu chúng tôi muốn kiểm tra dữ liệu trên trình duyệt (máy khách). Việc xác nhận này xảy ra trước khi dữ liệu được gửi đến máy chủ. Các trình duyệt khác nhau triển khai xác thực phía máy khách một cách khác nhau, nhưng nó dẫn đến cùng một kết quả.
Được chia sẻ giữa các trình duyệt khác nhau là lợi ích của việc sử dụng xác thực phía máy khách tích hợp sẵn của HTML5. Nó giúp chúng tôi tiết kiệm thời gian từ việc phải gửi thông tin đến máy chủ và chờ máy chủ gửi lại xác nhận hoặc từ chối dữ liệu. Điều này cũng có thể giúp chúng tôi bảo vệ máy chủ của mình khỏi mã độc hoặc dữ liệu từ người dùng độc hại. Nó cũng cho phép chúng tôi nhanh chóng đưa ra phản hồi cho người dùng về các trường cụ thể thay vì yêu cầu họ điền lại vào biểu mẫu nếu dữ liệu họ nhập vào biểu mẫu bị từ chối.
Trong bài học này, chúng ta sẽ học cách thêm một số kiểm tra xác thực vào <form>s!
Require Form
Đôi khi chúng tôi có các trường trong <form> của chúng tôi không phải là tùy chọn, tức là phải có thông tin được cung cấp trước khi chúng tôi có thể gửi nó. Để thực thi quy tắc này, chúng ta có thể thêm required thuộc tính vào một <input>phần tử.
Hiện tại, trong trường được cung cấp <form>, người dùng có thể gửi mà không cần đặt bất kỳ giá trị nào bên trong trường đầu vào.
Hãy thay đổi điều đó bằng cách thêm một required thuộc tính vào hiện tại <input>.
Sau khi bạn xóa điểm kiểm tra này, hãy thử gửi <form>mà không cần điền vào các trường.
Input min và max
Một xác thực tích hợp khác mà chúng ta có thể sử dụng là gán giá trị tối thiểu hoặc tối đa cho một trường số, ví dụ <input type=”number”>và <input type=”range”>. Để đặt giá trị tối thiểu có thể chấp nhận được, chúng tôi sử dụng min thuộc tính và chỉ định một giá trị. Mặt khác, để đặt giá trị tối đa có thể chấp nhận được, chúng tôi gán cho max thuộc tính một giá trị. Hãy xem điều này trong mã:
<form action="/example.html" method="POST"> <label for="guests">Enter # of guests:</label> <input id="guests" name="guests" type="number" min="1″ max="4″> <input type="submit" value="Submit"> </form>
Nếu người dùng cố gắng gửi đầu vào nhỏ hơn 1, cảnh báo sẽ xuất hiện:nhắc nhở trên một trường số để người dùng nhập giá trị lớn hơn hoặc bằng 1
Một thông báo tương tự sẽ xuất hiện nếu người dùng cố gắng nhập một số lớn hơn 4.
Kiểm tra min hoặc max length
Trong bài tập trước, chúng ta đã có thể sử dụng min và max đặt các giá trị tối thiểu và tối đa có thể chấp nhận được trong một trường số. Nhưng những gì về trường văn bản? Chắc chắn có những trường hợp chúng tôi sẽ không muốn người dùng của mình nhập nhiều hơn một số ký tự nhất định (hãy nghĩ về ký tự ký tự cho các tin nhắn trên Twitter). Chúng tôi thậm chí có thể muốn đặt số lượng ký tự tối thiểu. Thuận tiện, có các xác thực HTML5 được tích hợp sẵn cho những trường hợp này.
Để đặt số ký tự tối thiểu cho trường văn bản, chúng tôi thêm minlength thuộc tính và giá trị để đặt giá trị tối thiểu. Tương tự, để đặt số ký tự tối đa cho một trường văn bản, chúng tôi sử dụng maxlength thuộc tính và đặt giá trị tối đa. Hãy xem xét các thuộc tính này trong mã:
<form action="/example.html" method="POST"> <label for="summary">Summarize your feelings in less than 250 characters</label> <input id="summary" name="summary" type="text" minlength="5″ maxlength="250″ required> <input type="submit" value="Submit"> </form>
Kiểm tra biểu thức và regex
Ngoài việc kiểm tra độ dài của văn bản, chúng tôi cũng có thể thêm xác thực để kiểm tra cách văn bản được cung cấp. Đối với các trường hợp khi chúng tôi muốn thông tin nhập của người dùng tuân theo các nguyên tắc cụ thể, chúng tôi sử dụng pattern thuộc tính và gán cho nó một biểu thức chính quy hoặc regex. Biểu thức chính quy là một chuỗi các ký tự tạo nên một mẫu tìm kiếm. Nếu đầu vào khớp với regex, biểu mẫu có thể được gửi.
Giả sử chúng tôi muốn kiểm tra số thẻ tín dụng hợp lệ (số từ 14 đến 16 chữ số). Chúng tôi có thể sử dụng regex: [0-9]{14,16}kiểm tra xem người dùng chỉ cung cấp số và họ đã nhập ít nhất 14 chữ số và nhiều nhất 16 chữ số.
Để thêm cái này vào biểu mẫu:
<form action="/example.html" method="POST">
<label for="payment">Credit Card Number (no spaces):</label>
<br>
<input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">
<input type="submit" value="Submit">
</form>Nếu bạn muốn tìm hiểu thêm về Regex, hãy đọc thêm tại bài viết về regex của MDN .
Để xem nó trong thực tế, hãy sử dụng pattern thuộc tính trong HTML của chúng tôi!
Công việc tuyệt vời khi thêm xác thực phía máy khách vào <form>
Ôn tập
Làm việc tốt khi tương tác với <form>yếu tố cực kỳ phổ biến và hữu ích !
Trong bài học này, chúng ta đã xem qua:
- Mục đích của a <form>là cho phép người dùng nhập thông tin và gửi thông tin đó.
- Các <form>’s action thuộc tính xác định nơi thông tin của hình thức đi.
- Các <form>’s method thuộc tính xác định như thế nào thông tin được gửi và xử lý.
- Để thêm các trường cho người dùng nhập thông tin, chúng tôi sử dụng <input>phần tử và đặt type thuộc tính thành trường chúng tôi chọn:
- Cài đặt type để “text”tạo một trường hàng đơn để nhập văn bản.
- Cài đặt type để “password”tạo một trường hàng duy nhất kiểm duyệt đầu vào văn bản.
- Cài đặt type để “number”tạo một trường hàng duy nhất để nhập số.
- Cài đặt type để “range”tạo một thanh trượt để chọn từ một loạt các số.
- Cài đặt type để “checkbox”tạo một hộp kiểm duy nhất có thể được ghép nối với các hộp kiểm khác.
- Cài đặt type để “radio”tạo một nút radio có thể được ghép nối với các nút radio khác.
- Đặt type thành “list”sẽ ghép nối phần tử <input>với một <datalist>phần tử nếu id cả hai đều giống nhau.
- Cài đặt type để “submit”tạo nút gửi.
- Một <select>phần tử được điền với <option>các phần tử và hiển thị lựa chọn danh sách thả xuống.
- Một <datalist>phần tử được điền với <option>các phần tử và hoạt động với một <input>để tìm kiếm thông qua các lựa chọn.
- Phần <textarea>tử là trường nhập văn bản có vùng có thể tùy chỉnh.
- Khi một <form>được gửi, các name trường chấp nhận đầu vào và các value trường đó được gửi dưới dạng name=value cặp.
Sử dụng <form>phần tử này kết hợp với các phần tử khác được liệt kê ở trên cho phép chúng tôi tạo các trang web có cân nhắc đến mong muốn và nhu cầu của người dùng. Hãy tận dụng cơ hội để nắm lấy những gì bạn đã học và áp dụng nó!
- Xác thực phía máy khách xảy ra trong trình duyệt trước khi thông tin được gửi đến máy chủ.
- Việc thêm required thuộc tính vào một phần tử liên quan đến đầu vào sẽ xác thực rằng trường đầu vào có thông tin trong đó.
- Việc gán giá trị cho min thuộc tính của phần tử đầu vào số sẽ xác thực giá trị tối thiểu có thể chấp nhận được.
- Việc gán giá trị cho max thuộc tính của phần tử đầu vào số sẽ xác thực giá trị lớn nhất có thể chấp nhận được.
- Việc gán giá trị cho minlength thuộc tính của phần tử nhập văn bản sẽ xác thực số lượng ký tự tối thiểu có thể chấp nhận được.
- Việc gán giá trị cho maxlength thuộc tính của phần tử nhập văn bản sẽ xác thực số lượng ký tự tối đa có thể chấp nhận được.
- Gán một regex để pattern khớp với đầu vào với regex đã cung cấp.
- Nếu xác thực trên một <form>không vượt qua, người dùng sẽ nhận được thông báo giải thích lý do và <form>không thể gửi.
Các kiểm tra nhanh này giúp đảm bảo rằng dữ liệu đầu vào là chính xác và an toàn cho các máy chủ của chúng tôi. Nó cũng giúp cung cấp cho người dùng phản hồi ngay lập tức về những gì họ cần sửa chữa thay vì phải đợi máy chủ gửi lại thông tin đó.
Nếu bạn muốn thử thách bản thân:
- Tạo Form có nhiều trường chấp nhận đầu vào của người dùng.
- Thêm hai bộ nút radio hoặc hộp kiểm riêng biệt.
- Tìm kiếm cách thêm trình giữ chỗ (gợi ý gợi ý) vào trường đầu vào.
- Trình giữ chỗ hiển thị khi trường không có value, nó sẽ biến mất sau khi người dùng nhập hoặc chọn nội dung nào đó trong trường.
