Tạo trình kiểm tra vùng nhập liệu tốt hơn với HTML Bài viết này sẽ hướng dẫn chi tiết bạn cách thức để tạo ra các trình kiểm tra dữ liệu tối ưu và hiệu quả hơn. Thông qua bài viết này, bạn có thể nắm bắt được tốt hơn cách thức dùng JavaScript để xử lí các loại dữ liệu như mật khẩu, định dạng thư điện tử hợp lệ, địa chỉ URL, dữ liệu dạng số/chữ...

Vui lòng vào trang trong để xem chi tiết, và có thể xem qua các bài viết cùng tác giả:
- Hướng dẫn kiểm tra định dạng ngày tháng hợp lệ với JavaScript

Nhãn: trình kiểm tra, vùng nhập liệu, kiểm tra dữ liệu, mật khẩu, thư điện tử, địa chỉ URL

Miễn phí web hosting 1 năm đầu tại iPage

Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệ nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

The option of using pure HTML (sometimes with a dab of CSS) for form validation is something that until recently was unthinkable. Sure there have been all kinds of whacky JavaScript plug-ins over the years aimed at achieving something similar, but never a single standard that we could work towards.

For a more detailed introduction to HTML5 form validation you can find some great articles linked under References below. In this article we intend to present only a number of simple examples to get you started.

Before you ask, and someone always does, these examples will currently work only in the following browsers: Safari 5, Chrome 6, Opera 9, Firefox 4 Beta and the iPhone/iPad. Also each browser has a slightly different default behaviour.

1. The 'required' attribute

The simplest change you can make to your forms is to mark a text input field as 'required':

Your Name: <input type="text" name="name" required>
Your Name:

This informs the (HTML5-aware) web browser that the field is to be considered mandatory. Different browsers may mark the input box in some way (Firefox 4 Beta adds a red box-shadow by default), display a warning (Opera) or even prevent the form from being submitted if this field has no value. Hopefully these behaviours will converge in future releases.

We have actually created our own valid/invalid formatting using CSS to override the browser default, but more on that later. That's why you will currently see something like the following in the example above:

HTML5 required example

Before you type anything into the box a red marker is shown. As soon as a single character has been entered this changes to a green marker to indicate that the input is 'valid'.

Using CSS you can place markers inside or alongside the input box, or simply use background colours and borders as some browsers do by default.

2. Different INPUT types

This is where HTML5 really gets interesting and more useful. Along with the text input type, there are now a host of other options, including email, url, number, tel, date and many others.

On the iPhone/iPad the different input types are associated with different keyboards, making it easier for people to complete your online forms. In other web browsers they can be used in combination with the required attribute to limit or give advice on allowable input values.

INPUT type="email"

By changing the input type to email while also using the required attribute, the browser can be used to validate (in a limited fashion) email addresses:

Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">

Note that for this example we've made use of another HTML5 attribute placeholder which lets us display a prompt or instructions inside the field - something that previously had to be implemented using messy onfocus and onblur events.

The above code displays an input box as follows:

Email Address:

Again, different browsers implement this differently. In Opera it's sufficient to enter just *@* for the input to be accepted. In Safari, Chrome and Firefox you need to enter at least *@-.-. Obviously neither example is very limiting, but it will prevent people from entering completely wrong values, or even spaces.

Here is how it appears in Safari:

HTML5 email required example

INPUT type="url"

In a similar fashion to the email input type above, this one is designed to accept only properly-formatted URLs. Of course it currently does nothing of the kind, but later you will see how to improve it's behaviour using the pattern attribute.

Website: <input type="url" name="website" required>

Again, the input box appears as normal:


This time the minimum requirement for most browsers is a: - one or more letters followed by a colon. Again, not very helpful, but it will stop people trying to input their email address or other such nonsense.

As mentioned above, we can improve on this by making use of the pattern attribute which accepts a JavaScript regular expression. So the code above becomes:

Website: <input type="url" name="website" required pattern="https?://.+">

Now our input box will only accept text starting with http:// or https:// and at least one additional character:

Website: starting with http

If you're not yet familiar with regular expressions, you really should make it a priority to learn. For those already familiar, note that the ^ and $ are already implicit so the input has to match the entire expression. Pattern modifiers are not supported.

If anyone wants to contribute a more 'thorough' expression to test for valid email or url format, feel free to post it usin the Feedback form.

INPUT type="number" and type="range"

The number and range input types also accept parameters for min, max and step. In most cases you can leave out step as it defaults to 1.

Here you see an example including both a number input, typically displayed as a 'roller' and a range input displayed as a 'slider':

Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>
Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">

As with other HTML5 input types, browsers that don't recognise the new options will default to simple text inputs. For that reason it's a good idea to include a size for the input box.


The slider option is a bit bizarre in that no values are displayed, but may be useful for more 'analog' inputs. There are some bugs with the number input in that if you don't set a max value, clicking 'down' with the input blank will result in a very large number.

Here is how the two inputs are displayed in Safari:

HTML5 number and range example

and in Opera:

HTML5 number and range example

They are currently not supported in Firefox 4 Beta.

If you want to restrict the input of a text field to numbers without having the up/down arrows associated with the input box, you can always just set the input type to text and use a pattern of "\d+" (one or more numbers).

3. Other HTML5 INPUT types

Other valid HTML5 input types include:

  • color
  • date
  • datetime
  • datetime-local
  • month
  • search
  • tel
  • time
  • week

The search input will, in some browsers, change the styles to match the browser or operating system default search field format. You can see this demonstrated in our Search form.

The tel input type is handy for the iPhone as it selects a different input keyboard. There is no pattern-matching set by default so you would have to implement that yourself using the pattern attribute to accept only certain characters.

The color input is meant to let you select a hex-code from a colour wheel - or similar - but as yet doesn't appear to have been implemented in the wild.

The other date- and time-related options do have an effect at least in Opera, with pop-up calendars and other devices appearing to assist with input. While it would be great to see something like this in every browser, for now you probably need to stick with the ubiquitous JavaScript plugins.

JavaScript theo ngày

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web