IMG-LOGO
Trang Chủ Học HTML5 - CSS3 HTML Input Types - Các kiểu input trong HTML
×

Lý Thuyết

01. Giới thiệu về lập trình web - HTML/CSS BT01. Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS 02. Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS 03. Formatting Text using Tags - html tags 04. Creating Hyperlinks and Anchors (phần 1) - html tags 05. Creating Hyperlinks and Anchors (phần 2) - html tags 06. Introduction to CSS3 (phần 1) - HTML/CSS 07. Introduction event in html/css/javascript - HTML/CSS 08. Bài hoc Formatting Using Style Sheets - HTML/CSS 09. Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS 10. Cách dùng thẻ div để bố cục trang web (html/css/javascript) 11. Học lập trình html/css/javascript - (function) 12. Học lập trình html/css/javascript - session 15 - part 2(object) 13. Học lập trình html/css/javascript - session 15 - part 3(function + object) 14. Học lập trình html/css/javascript - session 15 - part 4(string) BT02. Bài tập array + javascript - HTML/CSS BT03. Thực hành javascript + onChange + onClick - HTML/CSS BT04.Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS 15. HTML/CSS/Javascript là gì và cách tạo 1 trang web đơn giản nhất. - HTML/CSS 16. HTML/CSS/JS - Tìm hiểu về Path trong HTML/CSS/JS 17. Lập trình HTML/CSS/JS 18. Tìm hiểu table trong HTML/CSS - HTML/CSS 19. Tìm hiểu tag videos, audio trong HTML/CSS/JS 20. Thiết kế form trong HTML/CSS/JS 21. Học lập trình html/css/js qua ví dụ phần 2 - HTML/CSS

Bài Tập

Bài tập - Tạo website giới thiệu thông tin cá nhân - profile page - Lập trình HTML/CSS/JS Bài tập - Thiết kế web truyện tranh - Lập trình HTML/CSS/JS Bài tập - kiểm tra 60 phút - thiết kế website sau - Lập trình HTML/CSS/JS Bài tập - kiểm tra 60 phút - thiết kế blog tin tin học - Lập trình HTML/CSS/JS Bài Tập - Thiết Kế Blog Dạy Học Excel Online - Lập Trình HTML/CSS/JS Bài tập - Thiết kế website bán đồng hồ - Lập trình HTML/CSS/JS Bài thi - Ôn tập HTML/CSS/JS - 60 phút - Web quản lý tin tức

Examination & Test

Bài Thi Lý Thuyết HTML/CSS/JS - 2

Tài Liệu Học

Giới thiệu về HTML5 Trình biên tập HTML Những thuộc tính cơ bản của HTML Các phần tử trong HTML Các thuộc tính trong HTML Thẻ tiêu đề trong HTML HTML Paragraphs - Các đoạn văn bản HTML HTML Styles - Các phong cách của HTML HTML Text Formatting - Định dạng văn bản trong HTML HTML Quotation and Citation Elements - Trích dẫn và các thành phần trích dẫn trong HTML HTML Comments - Các chú thích trong HTML HTML Colors - Màu trong HTML HTML RGB and RGBA Colors - Các màu RGB và RGBA trong HTML HTML HEX Colors - Các màu HEX trong HTML HTML HSL and HSLA Colors - Các màu HSL và HSLA trong HTML HTML Styles - Các phong cách trong HTML - CSS HTML Links - Các liên kết trong HTML HTML Links - Different Colors | Các liên kết trong HTML - Màu sắc khác nhau HTML Links - Create Bookmarks | Các liên kết trong HTML - Tạo các dấu trang HTML Images - Hình ảnh trong HTML HTML Image Maps - Bản đồ hình ảnh trong HTML HTML Background Images - Hình nền trong HTML HTML Picture Element - Các thành phần hình ảnh trong HTML HTML Tables - Bảng trong HTML HTML Lists - Các loại danh sách trong HTML HTML Unordered Lists - Danh sách không theo thứ tự trong HTML HTML Ordered Lists - Danh sách có thứ tự trong HTML HTML Other Lists - Các loại danh sách khác trong HTML HTML Block and Inline Elements - Các thành phần khối và trong hàng HTML HTML The class Attribute - Thuộc tính Class trong HTML HTML The id Attribute - Thuộc tính id trong HTML HTML Iframes HTML JavaScript HTML File Paths - Đường dẫn tệp HTML HTML - The Head Element | Thành phần Head trong HTML HTML Layout Elements and Techniques - Các thành phần bố cục và kĩ thuật trong HTML HTML Responsive Web Design - Thiết kế web phản hồi trong HTML HTML Computer Code Elements - Các thành phần thuộc mã máy tính trong HTML HTML Semantic Elements - Các thành phần có ngữ nghĩa trong HTML HTML Style Guide and Coding Conventions - Hướng dẫn về phong cách và quy ước code trong HTML HTML Entities - Các thực thể trong HTML HTML Symbols - Các biểu tượng trong HTML Using Emojis in HTML - Sử dụng biểu tượng cảm xúc trong HTML HTML Encoding (Character Sets) - Mã hóa HTML (Các bộ ký tự) HTML Uniform Resource Locators - Bộ định vị tài nguyên đồng nhất trong HTML HTML Versus XHTML - HTML đấu với XHTML HTML Forms - Các biểu mẫu trong HTML HTML Form Elements - Các thành phần biểu mẫu trong HTML HTML Input Types - Các kiểu input trong HTML HTML Input Attributes - Các thuộc tính input trong HTML HTML Input form* Attributes - Các thuộc tính form của thành phần input trong HTML




HTML Input Types - Các kiểu input trong HTML

by GokiSoft.Com - 08:33 06/06/2020 3,232 Lượt Xem



Chương này mô tả các kiểu(type) đầu vào(input) khác nhau cho thành phần HTML <input>.



Các kiểu input trong HTML:


Sau đây là các kiểu(type) đầu vào(input) khác nhau bạn có thể sử dụng trong HTML:


  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">




Input Type Text


<input type="text"> xác định một trường input văn bản:

ví dụ

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>

</body>
</html>


Đây là các mà code HTML trên sẽ được hiển thị trong một trình duyệt:


First name:

Last name:





Input Type Password


<input type="password"> xác định một trường mật khẩu:

ví dụ

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Password field</h2>

<p>The <strong>input type="password"</strong> defines a password field:</p>

<form action="/action_page.php">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd"><br><br>
  <input type="submit" value="Submit">
</form>

<p>The characters in a password field are masked (shown as asterisks or circles).</p>

</body>
</html>


Đây là cách mà code HTML trên sẽ được hiển thị trong một trình duyệt:

Username:

Password:

Cácký tự trong thanh mật khẩu được che dấu (hiển thị như các dấu hoa thị hoặc các vòng tròn).





Input Type Submit


<input type="submit"> xác định một nút cho việc gửi dữ liệu biểu mẫu đến trình xử lý biểu mẫu.

Trình xử lý biểu mẫu thông thường là một trang web trên máy chủ với một tập lệnh cho phép xử lý dữ liệu biểu mẫu.

Trình xử lý biểu mẫu được chỉ định trong thuộc tính  action của biểu mẫu:

ví dụ

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click "Submit", the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>


Đây là cách mà code HTML trên sẽ được hiển thị trong một trình duyệt:

First name:

Last name:


Nếu bạn bỏ qua thuộc tính giá trị của nút gửi, nút sẽ lấy một giá trị văn bản mặc định:

ví dụ

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form>
<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form> 

</body>
</html>





Input Type Reset


<input type="reset"> xác định một nút reset sẽ đặt lại toàn bộ các giá trị biểu mẫu thành các giá trị mặc định của chúng:

ví dụ

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Reset Button</h2>

<p>The <strong>input type="reset"</strong> defines a reset button that resets all form values to their default values:</p>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form> 

<p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p>

</body>
</html>


Đây là cách mà code HTML trên sẽ được hiển thị trong một trình duyệt:

First name:

Last name:


 

Nếu bạn thay đổi các giá trị đầu vào và bấm nút "reset", các dữ liệu biểu mẫu sẽ bị đặt lại thành các giá trị mặc định.




Input Type Radio


<input type="radio"> xác định một radio button.

ví dụ

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines a radio button:</p>

<form action="/action_page.php">
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>


Đây là cách mà code HTML trên sẽ được hiển thị trong một trình duyệt:

 
 
 




Input Type Checkbox


<input type="checkbox"> xác định một checkbox.

Các checkboxes cho phép người dùng chọn KHÔNG hoặc NHIỀU hơn các tùy chọn trong một số tùy chọn giới hạn.

ví dụ

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>


Đây là cách mà code HTML trên sẽ được hiển thị trong một trình duyệt:

 
 
 




Input Type Button


<input type="button"> xác định một nút:

ví dụ

<input type="button" onclick="alert('Hello World!')" value="Click Me!">
<!DOCTYPE html>
<html>
<body>

<h2>Input Button</h2>

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

</body>
</html>


Đây là cách mà code HTML trên sẽ được hiển thị trong một trình duyệt:






Input Type Color


 <input type="color"> được sử dụng cho các trường input nên chứa một màu nào đó.

Phụ thuộc vào sự hỗ trợ của trình duyệt, một công cụ chọn màu có thể hiển thị trong trường input.

ví dụ

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Show a Color Picker</h2>

<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>

<form action="/action_page.php">
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000">
  <input type="submit" value="Submit">
</form>

<p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).</p>

</body>
</html>





Input Type Date


 <input type="date"> được sử dụng cho các trường input nên chứa một ngày nào đó.

Phụ thuộc vào sự hỗ trợ của trình duyệt, một công cụ chọn thời gian có thể hiển thị trong trường input.

ví dụ

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>

<form action="/action_page.php">
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="date" is not supported in Safari or Internet Explorer 11 (or earlier).</p>

</body>
</html>


Bạn cũng thể sử dụng min và max để thêm giới hạn cho các ngày:

ví dụ

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Date Field Restrictions</h2>

<p>Use the min and max attributes to add restrictions to dates:</p>

<form action="/action_page.php">
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
  
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="date" is not supported in Safari or Internet Explorer 11 (or earlier).</p>

</body>
</html>





Input Type Datetime-local



<input type="datetime-local"> xác định một trường input gồm ngày và giờ, mà không có vùng thời gian.

Phụ thuộc vào sự hỗ trợ của trình duyệt, một công cụ chọn thời gian có thể hiển thị trong trường input.

ví dụ

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Local Date Field</h2>

<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p>

<form action="/action_page.php">
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="datetime-local" is not supported in Firefox, Safari or Internet Explorer 12 (or earlier).</p>

</body>
</html>





Input Type Email


 <input type="email"> được sử dụng cho các trường input nên chứa một địa chỉ e-mail nào đó.

Phụ thuộc vào sự hỗ trợ của trình duyệt, địa chỉ e-mail có thể được xác thực một cách tự động khi bị gửi đi.

Một vài điện thoại thông minh có thể nhận dang kiểu email, và thêm ".com" từ bàn phím để phù hợp trường input email.

ví dụ

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>





Input Type File


<input type="file"> xác định một thanh để chọn tệp tin và một nút "duyệt" cho việc tải lên tệp tin.

ví dụ

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>
<!DOCTYPE html>
<html>
<body>

<h1>File upload</h1>

<p>Show a file-select field which allows a file to be chosen for upload:</p>
<form action="/action_page.php">
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>





Input Type Month


<input type="month"> cho phép người dùng chọn một tháng và năm.

Phụ thuộc vào sự hỗ trợ của trình duyệt, một trình chọn thời gian có thể hiển thị trong trường input.

ví dụ

<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Month Field</h2>

<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>

<form action="/action_page.php">
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="month" is not supported in Firefox, Safari, or Internet Explorer 11 (or earlier).</p>

</body>
</html>





Input Type Number


<input type="number"> xác định một trường input chữ số.

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

Ví dụ tiếp theo hiển thị một trường input chữ số, nơi bạn có thể nhập một giá trị từ 1 đến 5:

ví dụ

<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Number Field</h2>

<p>The <strong>input type="number"</strong> defines a numeric input field.</p>

<p>You can use the min and max attributes to add numeric restrictions in the input field:</p>

<form action="/action_page.php">
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input type="submit" value="Submit">
</form>

</body>
</html>





Giới hạn input(Input Restrictions)


Đây là một danh sách của một vài giới hạn input:

Thuộc tínhMô tả
checkedChỉ định một thanh đầu vào nên được chon trước khi trang được tải (cho type="checkbox" hay type="radio")
disabledChỉ định thanh đầu vào nên bị vô hiệu hóa
maxChỉ định giá trị tối đa cho trường input
maxlengthChỉ định một số lượng ký tự tối đa cho một trường input
minChỉ định giá trị tối thiểu cho một trường input
patternChỉ định một biểu thức chính quy để kiểm tra giá trị input
readonlyChỉ định chỉ định một trường input chỉ được đọc (không thể thay đổi)
requiredChỉ định một trường input bị bắt buộc (phải được điền)
sizeChỉ định độ rộng (trong các ký tự) của một trường input
stepChỉ định các khoảng số hợp lệ cho trường input
valueChỉ định giá trị mặc định cho một trường input


Ví dụ tiếp theo hiển thị một trường input chữ số, nơi bạn có thể nhập một giá trị từ 0 đến 100, trong bước 10. Giá trị mặc định là 30:

ví dụ

<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Numeric Steps</h2>

<p>Depending on browser support: Fixed steps will apply in the input field.</p>

<form action="/action_page.php">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
  <input type="submit" value="Submit">
</form>

</body>
</html>





Input Type Range


<input type="range"> xác định một sự điều chỉnh input một số mà giá trị chính xác không quan trọng (như một thanh trượt có thể điều chỉnh). Mặc định phạm vi từ 0 đến 100. Tuy nhiên, bạn có thể đặt giới hạn các số nào sẽ được chấp nhận với các thuộc tính minmax, vàstep :

ví dụ

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Range Field</h2>

<p>Depending on browser support: The input type "range" can be displayed as a slider control.<p>

<form action="/action_page.php" method="get">
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit" value="Submit">
</form>

</body>
</html>





Input Type Search


<input type="search"> được sử dụng cho các trường tìm kiếm (một trường tìm kiếm hành động như một thanh văn bản bình thường).

ví dụ

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Search Field</h2>
<p>The <strong>input type="search"</strong> is used for search fields (behaves like a regular text field):</p>

<form action="/action_page.php">
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
  <input type="submit" value="Submit">
</form>

</body>
</html>





Input Type Tel


<input type="tel"> được sử dụng cho các trường input nên được chứa một số điện thoại nào đó.

ví dụ

<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
<!DOCTYPE html>
<html>
<body>

<h2>Telephone Field</h2>

<p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone number:</p>

<form action="/action_page.php">
  <label for="phone">Enter a phone number:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
  <small>Format: 123-45-678</small><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>





Input Type Time


 <input type="time"> cho phép người dùng chọn một thời gian (không có vùng thời gian).

Phụ thuộc vào sự hỗ trợ của trình duyệt, một công cụ chọn thời gian có thể hiển thị trong trường input.



Input Type Url


<input type="url"> được sử dụng cho trường input nên chứa một địa chỉ URL.

Phụ thuộc vào sự hỗ trợ của trình duyệt, trường url có thể được xác thực một cách tự động khi được gửi.

Một vài điện thoại thông minh nhận dạng kiểu url, và thêm ".com" từ bàn phím để phù hợp trường input url.

ví dụ

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>
<!DOCTYPE html>
<html>
<body>

<h1>Display a URL Input Field</h1>

<p>The <strong>input type="url"</strong> is used for input fields that should contain a URL address:</p>

<form action="/action_page.php">
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
  <input type="submit" value="Submit">
</form>

</body>
</html>





Input Type Week


<input type="week"> cho phép người dùng chọn một tuần hoặc một năm.

Phụ thuộc vào sự hỗ trợ của trình duyệt, một công cụ chọn ngày có thể được hiển thị ra trên trường input.

ví dụ

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>
<!DOCTYPE html>
<html>
<body>

<h1>Display a Week Input Control</h1>

<p>The <strong>input type="week"</strong> allows the user to select a week and year.</p>

<p>If the browser supports it, a date picker pops up when entering the input field.</p>

<form action="/action_page.php">
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="week" is not supported in Firefox, Safari or Internet Explorer 11 (or earlier).</p>

</body>
</html>



Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Đã sao chép!!!