HTML Input Types - Các kiểu input trong HTML
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:
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:
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ính | Mô tả |
|---|---|
| checked | Chỉ định một thanh đầu vào nên được chon trước khi trang được tải (cho type="checkbox" hay type="radio") |
| disabled | Chỉ định thanh đầu vào nên bị vô hiệu hóa |
| max | Chỉ định giá trị tối đa cho trường input |
| maxlength | Chỉ định một số lượng ký tự tối đa cho một trường input |
| min | Chỉ định giá trị tối thiểu cho một trường input |
| pattern | Chỉ định một biểu thức chính quy để kiểm tra giá trị input |
| readonly | Chỉ định chỉ định một trường input chỉ được đọc (không thể thay đổi) |
| required | Chỉ định một trường input bị bắt buộc (phải được điền) |
| size | Chỉ định độ rộng (trong các ký tự) của một trường input |
| step | Chỉ định các khoảng số hợp lệ cho trường input |
| value | Chỉ đị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 min, max, 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>
Tags: