Số có phải là loại đầu vào hợp lệ trong HTML5 không?

Sau đây là đoạn trích từ cuốn sách của chúng tôi, HTML5 & CSS3 cho Thế giới thực, Phiên bản thứ 2, được viết bởi Alexis Goldstein, Louis Lazaris và Estelle Weyl. Các bản sao được bán tại các cửa hàng trên toàn thế giới hoặc bạn có thể mua dưới dạng sách điện tử tại đây

Có thể bạn đã quen thuộc với thuộc tính type của phần tử input. Đây là thuộc tính xác định loại đầu vào biểu mẫu nào sẽ được hiển thị cho người dùng. Nếu nó bị bỏ qua—hoặc trong trường hợp các loại đầu vào mới và các trình duyệt cũ hơn, không được hiểu—thì nó vẫn hoạt động; . Đây là chìa khóa giúp các biểu mẫu HTML5 có thể sử dụng được ngay cả khi bạn vẫn đang hỗ trợ các trình duyệt cũ hơn. Nếu bạn sử dụng kiểu nhập liệu mới, chẳng hạn như email hoặc search, các trình duyệt cũ hơn sẽ chỉ hiển thị cho người dùng một trường văn bản tiêu chuẩn

Biểu mẫu đăng ký của chúng tôi hiện sử dụng bốn trong số mười loại đầu vào mà bạn quen thuộc. checkbox,

<label for="email">My email address islabel> 
<input type="email" id="email" name="email"/>
0,
<label for="email">My email address islabel> 
<input type="email" id="email" name="email"/>
1 và
<label for="email">My email address islabel> 
<input type="email" id="email" name="email"/>
2. Đây là danh sách đầy đủ các loại có sẵn trước HTML5

  • <label for="email">My email address islabel> 
    <input type="email" id="email" name="email"/>
    3
  • checkbox
  • <label for="email">My email address islabel> 
    <input type="email" id="email" name="email"/>
    5
  • <label for="email">My email address islabel> 
    <input type="email" id="email" name="email"/>
    6
  • <label for="email">My email address islabel> 
    <input type="email" id="email" name="email"/>
    7
  • <label for="email">My email address islabel> 
    <input type="email" id="email" name="email"/>
    1
  • <label for="email">My email address islabel> 
    <input type="email" id="email" name="email"/>
    9
  • function setErrorMessages(formControl) {
      var validityState_object = formControl.validity;
      if (validityState_object.valueMissing) {
          formControl.setCustomValidity('Please set an age 
    ↵(required)');  
      } else if (validityState_object.rangeUnderflow) {
          formControl.setCustomValidity('You\'re too young');
      } else if (validityState_object.rangeOverflow) {
          formControl.setCustomValidity('You\'re too old');
      } else if (validityState_object.stepMismatch) {
          formControl.setCustomValidity('Counting half 
    ↵birthdays?');
      } else {
          //if valid, must set falsy value or will always error 
          formControl.setCustomValidity('');
      }
    }
    0
  • <label for="email">My email address islabel> 
    <input type="email" id="email" name="email"/>
    2
  • <label for="email">My email address islabel> 
    <input type="email" id="email" name="email"/>
    0

Đặc tả HTML5 cung cấp cho chúng tôi thêm 9 loại đầu vào cung cấp nhiều phần tử giao diện người dùng dành riêng cho dữ liệu hơn và xác thực dữ liệu gốc

  • search
  • email
  • function setErrorMessages(formControl) {
      var validityState_object = formControl.validity;
      if (validityState_object.valueMissing) {
          formControl.setCustomValidity('Please set an age 
    ↵(required)');  
      } else if (validityState_object.rangeUnderflow) {
          formControl.setCustomValidity('You\'re too young');
      } else if (validityState_object.rangeOverflow) {
          formControl.setCustomValidity('You\'re too old');
      } else if (validityState_object.stepMismatch) {
          formControl.setCustomValidity('Counting half 
    ↵birthdays?');
      } else {
          //if valid, must set falsy value or will always error 
          formControl.setCustomValidity('');
      }
    }
    5
  • function setErrorMessages(formControl) {
      var validityState_object = formControl.validity;
      if (validityState_object.valueMissing) {
          formControl.setCustomValidity('Please set an age 
    ↵(required)');  
      } else if (validityState_object.rangeUnderflow) {
          formControl.setCustomValidity('You\'re too young');
      } else if (validityState_object.rangeOverflow) {
          formControl.setCustomValidity('You\'re too old');
      } else if (validityState_object.stepMismatch) {
          formControl.setCustomValidity('Counting half 
    ↵birthdays?');
      } else {
          //if valid, must set falsy value or will always error 
          formControl.setCustomValidity('');
      }
    }
    6
  • function setErrorMessages(formControl) {
      var validityState_object = formControl.validity;
      if (validityState_object.valueMissing) {
          formControl.setCustomValidity('Please set an age 
    ↵(required)');  
      } else if (validityState_object.rangeUnderflow) {
          formControl.setCustomValidity('You\'re too young');
      } else if (validityState_object.rangeOverflow) {
          formControl.setCustomValidity('You\'re too old');
      } else if (validityState_object.stepMismatch) {
          formControl.setCustomValidity('Counting half 
    ↵birthdays?');
      } else {
          //if valid, must set falsy value or will always error 
          formControl.setCustomValidity('');
      }
    }
    7
  • function setErrorMessages(formControl) {
      var validityState_object = formControl.validity;
      if (validityState_object.valueMissing) {
          formControl.setCustomValidity('Please set an age 
    ↵(required)');  
      } else if (validityState_object.rangeUnderflow) {
          formControl.setCustomValidity('You\'re too young');
      } else if (validityState_object.rangeOverflow) {
          formControl.setCustomValidity('You\'re too old');
      } else if (validityState_object.stepMismatch) {
          formControl.setCustomValidity('Counting half 
    ↵birthdays?');
      } else {
          //if valid, must set falsy value or will always error 
          formControl.setCustomValidity('');
      }
    }
    8
  • function setErrorMessages(formControl) {
      var validityState_object = formControl.validity;
      if (validityState_object.valueMissing) {
          formControl.setCustomValidity('Please set an age 
    ↵(required)');  
      } else if (validityState_object.rangeUnderflow) {
          formControl.setCustomValidity('You\'re too young');
      } else if (validityState_object.rangeOverflow) {
          formControl.setCustomValidity('You\'re too old');
      } else if (validityState_object.stepMismatch) {
          formControl.setCustomValidity('Counting half 
    ↵birthdays?');
      } else {
          //if valid, must set falsy value or will always error 
          formControl.setCustomValidity('');
      }
    }
    9
  • <label for="url">My website is located at:label> 
    <input type="url" id="url" name="url"/>
    0
  • <label for="url">My website is located at:label> 
    <input type="url" id="url" name="url"/>
    1

HTML5. 1 và WHATWG HTML Living Standard bao gồm bốn loại đầu vào ngày bổ sung, ba trong số đó được hỗ trợ tốt trong các trình duyệt hiện đại

  • <label for="url">My website is located at:label> 
    <input type="url" id="url" name="url"/>
    2
  • <label for="url">My website is located at:label> 
    <input type="url" id="url" name="url"/>
    3
  • <label for="url">My website is located at:label> 
    <input type="url" id="url" name="url"/>
    4
  • <label for="url">My website is located at:label> 
    <input type="url" id="url" name="url"/>
    5
  • (không được hỗ trợ trong bất kỳ trình duyệt nào)

Hãy xem xét chi tiết từng loại mới này và xem cách chúng ta có thể
đưa chúng vào sử dụng

Tìm kiếm

Loại đầu vào search (_______17_______7) cung cấp trường tìm kiếm—điều khiển nhập văn bản một dòng để nhập một hoặc nhiều cụm từ tìm kiếm. Thông số kỹ thuật

Sự khác biệt giữa trạng thái văn bản và trạng thái tìm kiếm chủ yếu là phong cách. trên các nền tảng nơi các trường tìm kiếm được phân biệt với các trường văn bản thông thường, trạng thái tìm kiếm có thể dẫn đến giao diện nhất quán với các trường tìm kiếm của nền tảng thay vì xuất hiện như một trường văn bản thông thường

Nhiều trình duyệt định kiểu đầu vào tìm kiếm theo cách nhất quán với hộp tìm kiếm của trình duyệt hoặc hệ điều hành. Hiện tại, Chrome, Safari, Opera và IE đã thêm khả năng xóa đầu vào bằng cách nhấp chuột bằng cách cung cấp biểu tượng × sau khi văn bản được nhập vào trường, như thể hiện trong Hình 4. 5. Các loại đầu vào ngày/giờ cũng có thể xóa được trong Chrome và Opera và IE11 bao gồm biểu tượng × để xóa hầu hết các loại đầu vào hiện tại, bao gồm cả đầu vào của loại văn bản

Số có phải là loại đầu vào hợp lệ trong HTML5 không?

hinh 4. 5. Loại đầu vào tìm kiếm được tạo kiểu giống với các trường tìm kiếm của hệ điều hành

Trên các thiết bị của Apple, trường tìm kiếm có các góc được bo tròn theo mặc định trong Chrome, Safari và Opera, phù hợp với giao diện trường tìm kiếm của thiết bị. Trên bàn di chuột có bàn phím động, nút “đi” xuất hiện dưới dạng biểu tượng tìm kiếm hoặc từ “tìm kiếm”, tùy thuộc vào thiết bị. Nếu bạn bao gồm thuộc tính kết quả không chuẩn, Chrome và Opera sẽ hiển thị biểu tượng kính lúp/kính nhìn trong trường biểu mẫu

Mặc dù bạn vẫn có thể sử dụng type="text" cho các trường tìm kiếm, loại tìm kiếm mới là một gợi ý trực quan về nơi người dùng cần đến để tìm kiếm trang web và cung cấp một giao diện mà người dùng quen thuộc. HTML5 Herald không có trường tìm kiếm, nhưng đây là một ví dụ về cách bạn sử dụng nó

<form id="search" method="get"> 
  <label for="s">Searchlabel> 
  <input type="search" id="s" name="s"/> 
  <input type="submit" value="Search"/> 
form>

<label for="url">My website is located at:label> 
<input type="url" id="url" name="url"/>
9 giống như tất cả các loại đầu vào mới, xuất hiện dưới dạng hộp văn bản thông thường trong các trình duyệt không hỗ trợ, nên không có lý do gì để không sử dụng nó khi thích hợp

Địa chỉ email

Loại email input1, không ngạc nhiên, được sử dụng để chỉ định một hoặc nhiều địa chỉ email. Nó hỗ trợ thuộc tính Boolean input2, cho phép nhiều địa chỉ email được phân tách bằng dấu phẩy (có dấu cách tùy chọn)

Hãy thay đổi biểu mẫu của chúng tôi để sử dụng input3 cho địa chỉ email của người đăng ký

<label for="email">My email address islabel> 
<input type="email" id="email" name="email"/>

Nếu bạn thay đổi loại đầu vào từ

<label for="email">My email address islabel> 
<input type="email" id="email" name="email"/>
0 thành email, như chúng tôi đã thực hiện ở đây, bạn sẽ không nhận thấy thay đổi rõ ràng nào trong giao diện người dùng; . Tuy nhiên, có sự khác biệt đằng sau hậu trường

Sự thay đổi trở nên rõ ràng nếu bạn đang sử dụng thiết bị có bàn di chuột. Khi bạn tập trung vào trường email, hầu hết các thiết bị cảm ứng—chẳng hạn như iPad hoặc điện thoại Android chạy Chromium—đều sẽ hiển thị bàn phím được tối ưu hóa để nhập email, bao gồm ký hiệu @, dấu chấm và nút dấu cách, nhưng không có dấu phẩy, như minh họa trong . 6

Số có phải là loại đầu vào hợp lệ trong HTML5 không?

hinh 4. 6. Kiểu nhập email cung cấp bàn phím tùy chỉnh trên thiết bị iOS

Firefox, Chrome, Opera và Internet Explorer 10 cũng cung cấp thông báo lỗi cho các mục nhập email không hợp lệ. nếu bạn cố gắng gửi biểu mẫu có nội dung không thể nhận dạng dưới dạng một hoặc nhiều địa chỉ email, trình duyệt sẽ cho bạn biết điều gì sai. Các thông báo lỗi mặc định được hiển thị trong Hình 4. 7

Số có phải là loại đầu vào hợp lệ trong HTML5 không?

hinh 4. 7. Thông báo lỗi do định dạng sai địa chỉ email trên Opera (trái) và Firefox (phải)

Ghi chú. Thông báo xác thực tùy chỉnh

Không thích thông báo lỗi mặc định mà trình duyệt cung cấp? . input7 nhận thông báo lỗi mà bạn muốn cung cấp làm tham số duy nhất. Nếu bạn đặt thông báo xác thực tùy chỉnh, khi giá trị đó trở nên hợp lệ, bạn phải đặt thông báo xác thực thành một chuỗi trống (giá trị giả) để cho phép gửi biểu mẫu

function setErrorMessages(formControl) {
  var validityState_object = formControl.validity;
  if (validityState_object.valueMissing) {
      formControl.setCustomValidity('Please set an age 
↵(required)');  
  } else if (validityState_object.rangeUnderflow) {
      formControl.setCustomValidity('You\'re too young');
  } else if (validityState_object.rangeOverflow) {
      formControl.setCustomValidity('You\'re too old');
  } else if (validityState_object.stepMismatch) {
      formControl.setCustomValidity('Counting half 
↵birthdays?');
  } else {
      //if valid, must set falsy value or will always error 
      formControl.setCustomValidity('');
  }
}

Thật không may, trong khi bạn có thể thay đổi nội dung của tin nhắn, thì bạn lại bị mắc kẹt với hình thức của nó, ít nhất là vào lúc này

URL

Đầu vào

function setErrorMessages(formControl) {
  var validityState_object = formControl.validity;
  if (validityState_object.valueMissing) {
      formControl.setCustomValidity('Please set an age 
↵(required)');  
  } else if (validityState_object.rangeUnderflow) {
      formControl.setCustomValidity('You\'re too young');
  } else if (validityState_object.rangeOverflow) {
      formControl.setCustomValidity('You\'re too old');
  } else if (validityState_object.stepMismatch) {
      formControl.setCustomValidity('Counting half 
↵birthdays?');
  } else {
      //if valid, must set falsy value or will always error 
      formControl.setCustomValidity('');
  }
}
5 input9 được sử dụng để chỉ định địa chỉ web. Giống như email, nó sẽ xuất hiện dưới dạng trường văn bản bình thường. Trên nhiều màn hình cảm ứng, bàn phím ảo được hiển thị sẽ được tối ưu hóa cho mục nhập địa chỉ web, với dấu gạch chéo lên (/) và dấu “. phím tắt com”

Hãy cập nhật biểu mẫu đăng ký của chúng tôi để sử dụng loại đầu vào url

<label for="url">My website is located at:label> 
<input type="url" id="url" name="url"/>

Xác thực URL

Tất cả các trình duyệt hiện đại bắt đầu với Internet Explorer 10 đều hỗ trợ loại đầu vào url, báo cáo đầu vào là không hợp lệ nếu giá trị không bắt đầu bằng một giao thức. Chỉ có định dạng giao thức chung của một URL được xác thực, vì vậy, ví dụ: type1 sẽ được coi là hợp lệ, mặc dù type2 không phải là một giao thức thực và type3 không phải là một miền cấp cao nhất thực sự. Nếu bạn muốn giá trị đã nhập tuân theo một định dạng cụ thể hơn, hãy cung cấp thông tin trong nhãn của bạn (hoặc trong trình giữ chỗ) để cho người dùng của bạn biết và sử dụng thuộc tính mẫu để đảm bảo rằng thông tin đó chính xác, như đã mô tả trước đó

Số điện thoại

Đối với số điện thoại, hãy sử dụng kiểu đầu vào

function setErrorMessages(formControl) {
  var validityState_object = formControl.validity;
  if (validityState_object.valueMissing) {
      formControl.setCustomValidity('Please set an age 
↵(required)');  
  } else if (validityState_object.rangeUnderflow) {
      formControl.setCustomValidity('You\'re too young');
  } else if (validityState_object.rangeOverflow) {
      formControl.setCustomValidity('You\'re too old');
  } else if (validityState_object.stepMismatch) {
      formControl.setCustomValidity('Counting half 
↵birthdays?');
  } else {
      //if valid, must set falsy value or will always error 
      formControl.setCustomValidity('');
  }
}
6 type5. Không giống như các loại
function setErrorMessages(formControl) {
  var validityState_object = formControl.validity;
  if (validityState_object.valueMissing) {
      formControl.setCustomValidity('Please set an age 
↵(required)');  
  } else if (validityState_object.rangeUnderflow) {
      formControl.setCustomValidity('You\'re too young');
  } else if (validityState_object.rangeOverflow) {
      formControl.setCustomValidity('You\'re too old');
  } else if (validityState_object.stepMismatch) {
      formControl.setCustomValidity('Counting half 
↵birthdays?');
  } else {
      //if valid, must set falsy value or will always error 
      formControl.setCustomValidity('');
  }
}
5 và email, loại tel không thực thi một cú pháp hoặc mẫu cụ thể. Chữ cái và số—thật vậy, bất kỳ ký tự nào không phải là dòng mới hoặc dấu xuống dòng—đều hợp lệ. Có một lý do tốt cho việc này. trên toàn thế giới, các quốc gia có số điện thoại hợp lệ với nhiều độ dài và dấu câu khác nhau, vì vậy không thể chỉ định một định dạng duy nhất làm tiêu chuẩn. Ví dụ: ở Hoa Kỳ, +1(415)555-1212 cũng được hiểu như 415. 555. 1212, nhưng các công ty cũng có thể sử dụng các chữ cái trong số điện thoại của họ, chẳng hạn như (800)GỌI NGAY BÂY GIỜ

Bạn có thể khuyến khích một định dạng cụ thể bằng cách bao gồm một trình giữ chỗ với cú pháp chính xác hoặc một nhận xét sau khi nhập kèm theo một ví dụ. Ngoài ra, bạn có thể quy định định dạng bằng cách sử dụng thuộc tính mẫu. Bao gồm tiêu đề với thuộc tính mẫu để cung cấp chú giải công cụ và để cải thiện UX của thông báo lỗi xác thực gốc. Bạn cũng có thể sử dụng phương pháp input7 để cung cấp thêm thông tin xác thực phía máy khách

Khi sử dụng loại đầu vào

function setErrorMessages(formControl) {
  var validityState_object = formControl.validity;
  if (validityState_object.valueMissing) {
      formControl.setCustomValidity('Please set an age 
↵(required)');  
  } else if (validityState_object.rangeUnderflow) {
      formControl.setCustomValidity('You\'re too young');
  } else if (validityState_object.rangeOverflow) {
      formControl.setCustomValidity('You\'re too old');
  } else if (validityState_object.stepMismatch) {
      formControl.setCustomValidity('Counting half 
↵birthdays?');
  } else {
      //if valid, must set falsy value or will always error 
      formControl.setCustomValidity('');
  }
}
6, bàn phím cảm ứng động thường sẽ hiển thị bàn phím điện thoại, bao gồm cả phím hoa thị và phím thăng. Bạn có thể sử dụng
function setErrorMessages(formControl) {
  var validityState_object = formControl.validity;
  if (validityState_object.valueMissing) {
      formControl.setCustomValidity('Please set an age 
↵(required)');  
  } else if (validityState_object.rangeUnderflow) {
      formControl.setCustomValidity('You\'re too young');
  } else if (validityState_object.rangeOverflow) {
      formControl.setCustomValidity('You\'re too old');
  } else if (validityState_object.stepMismatch) {
      formControl.setCustomValidity('Counting half 
↵birthdays?');
  } else {
      //if valid, must set falsy value or will always error 
      formControl.setCustomValidity('');
  }
}
6 cho nhiều mục đích khác ngoài số điện thoại. Ví dụ: nó có thể là bàn phím tốt nhất để nhập biểu mẫu số an sinh xã hội

Chia sẻ bài viết này

Alexis Goldstein

Lần đầu tiên Alexis Goldstein tự học HTML khi còn là học sinh trung học vào giữa những năm 1990 và tiếp tục lấy bằng Khoa học Máy tính tại Đại học Columbia. Cô điều hành công ty đào tạo và phát triển phần mềm của riêng mình, aut faciam LLC. Trước khi tự mình thành lập, Alexis đã dành bảy năm làm việc trong lĩnh vực Công nghệ ở Phố Wall, nơi cô làm việc trong cả không gian vốn chủ sở hữu tiền mặt và phái sinh vốn chủ sở hữu tại ba công ty lớn, đồng thời học cách yêu thích việc đánh giá mã hàng ngày. Cô ấy là giáo viên và là người đồng tổ chức Girl Develop It, đồng thời là thành viên rất đáng tự hào của không gian tin tặc NYC Resistor ở Brooklyn, NY

Estelle Weyl

Estelle Weyl là kỹ sư mặt trước đến từ San Francisco, người đã phát triển các trang web có thể truy cập dựa trên tiêu chuẩn từ năm 1999. Cô ấy cũng viết hai blog kỹ thuật với hàng triệu người truy cập. Niềm đam mê của cô ấy là dạy phát triển web, vì vậy bạn sẽ thấy cô ấy nói về CSS3, HTML5, JavaScript và phát triển web di động tại các hội nghị trên khắp Hoa Kỳ

Số có phải là loại đầu vào hợp lệ trong HTML5 không?

Louis Lazaris

Louis đã tham gia vào ngành phát triển web từ năm 2000 và là người đồng biên tập nội dung HTML/CSS trên SitePoint. Anh ấy viết blog tại Impressive Webs và quản lý Web Tools Weekly, một bản tin dành cho các nhà phát triển front-end chủ yếu tập trung vào các công cụ

Số có phải là đầu vào hợp lệ trong HTML không?

Số đầu vào được coi là hợp lệ khi trống và khi một số duy nhất được nhập, nhưng nếu không thì không hợp lệ . Nếu thuộc tính bắt buộc được sử dụng, đầu vào không còn được coi là hợp lệ khi trống. Ghi chú. Bất kỳ số nào cũng là giá trị có thể chấp nhận được, miễn là số đó là số dấu phẩy động hợp lệ (nghĩa là không phải NaN hoặc Infinity).

Đâu không phải là kiểu đầu vào trong HTML5?

7. Cái nào sau đây không phải là thành phần biểu mẫu được thêm vào HTML5? . không phải là phần tử biểu mẫu được thêm vào HTML5.

Văn bản loại đầu vào có cho phép số không?

Ví dụ 1. Ví dụ bên dưới minh họa Đầu vào[type=”text”] chỉ cho phép Giá trị số bằng Javascript với sự trợ giúp của mã ASCII .

Loại nào chỉ sử dụng chữ số làm đầu vào trong HTML5?

Loại đầu vào Số . Bạn cũng có thể đặt giới hạn về những số được chấp nhận