Input | Tag Html | Học Web Chuẩn

Có thể bạn quan tâm

Trang chủ
Tham khảo
Tag html
<input />

Định nghĩa và sử dụng

Tag <input /> được sử dụng cho người dùng nhập hay chọn thông tin.
Dạng của <input /> có thể có nhiều dạng khác nhau, tùy thuộc vào thuộc tính tùy trọn type, có thể là text, một checkbox, một trường password, một button radio, một button, ...
Khuyên: sử dụng tag <label> để tạo nhãn cho các thành phần <input />

Sự khác nhau giữa HTML và XHTML

HTML4.01	XHTML1.0	XHTML1.1
Không cần kết thúc tag <input>	Cần khoảng trắng và ký tự "/" để kết thúc tag <input />

Cấu trúc

Tag <input /> phải được viết bên trong một tag <form>

Ví dụ

Xem thêm ví dụ

Html viết:

<form action="#"> <ul> <li>Họ tên: <input type="text" value="" size="30" /></li> <li>Email: <input type="text" value="" size="30" /></li> <li>Ngày sinh: <input type="text" value="" size="10" /></li> </ul> <p><input type="submit" value="Gửi" /></p> </form>

Hiển thị trình duyệt:

Họ tên:
Email:
Ngày sinh:

Các loại (type) <input />

Input dạng text:

Sử dụng để nhập giá trị text.

Xem thêm ví dụ

Input dạng password:

Text hiển thị bên trong dưới dạng password.

Xem thêm ví dụ

Input dạng hidden:

Dạng này sẽ không hiển thì ra trình duyệt. Được sử dụng khi không muốn dữ liệu bị thay đổi.

Input dạng checkbox:

Được sử dụng cho nhiều lựa chọn khác nhau.

Xem thêm ví dụ

Input dạng radio:

Được sử dụng cho một chọn lựa duy nhất. Các <input /> phải cùng "name", nếu không sẽ không chọn được.

Xem thêm ví dụ

Input dạng button:

Sử dụng như một nút nhấn.

Input dạng button reset:

Dùng để reset lại giá trị trong <form>.

Input dạng button submit:

Dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong <form>.

Input dạng image:

Sử dụng như một nút nhấn bằng hình.

Input dạng file upload:

Sử dụng để upload file.

Trình duyệt hỗ trợ

<input /> được hỗ trợ trong đa số các trình duyệt.

Thuộc tính

Cách sử dụng: <input thuoctinh="giatri" />

Thuộc tính tùy chọn

Thuộc tính	Giá trị	Ví dụ	Mô tả
accept	kiểu MIME	accept="image/gif"	Xác định loại tập tin có thể được gửi thông qua một tập tin tải lên (upload) (sử dụng đối với type="file"). Không được hỗ trợ trong phần lớn các trình duyệt.
align	left right top middle bottom	align="left"	Được dùng để sắp xếp vị trí cho image của <input /> (sử dụng đối với type="image"). Không khuyến khích sử dụng, sử dụng thuộc tính text-align của css để thay thế. Không được hỗ trợ trong DTD Strict
alt	Text	alt="Đây là alt"	Xác định alt cho image của <input /> (chỉ cho type="image")
checked	checked	checked="checked"	Xác định một thành phần <input /> được chọn trước khi tải trang (sử dụng đối với type="checkbox" hay type="radio")
disabled	disabled	disabled="disabled"	Xác định một thành phần <input /> không hiển thị trước khi tải trang.
maxlength	Số	maxlength="50"	Xác định số ký tự nhiều nhất được phép nhập của một trường <input /> (sử dụng đối với type="text" hay type="password")
name	name	name="inputName"	Xác định tên cho thành phần <input />.
readonly	readonly	readonly="readonly"	Xác định rằng trường <input /> chỉ được đọc (sử dụng đối với type="text" hay type="password")
size	Số	size="30"	Xác định chiều rộng của một trường <input />.
src	URL	src="img/ btn_name.gif"	Hiển thị đường dẫn của hình, hiển thị như một button submit.
type	button	type="button"	Xác định loại hiển thị dạng nút nhấn.
	checkbox	type="checkbox"	Xác định loại hiển thị dạng hộp kiểm.
	file	type="file"	Xác định loại hiển thị dạng chọn file.
	hidden	type="hidden"	Xác định loại hiển thị dạng ẩn.
	image	type="image"	Xác định loại hiển thị dạng hình.
	password	type="password"	Xác định loại hiển thị dạng password.
	radio	type="radio"	Xác định loại hiển thị dạng chọn lựa.
	reset	type="reset"	Xác định loại hiển thị dạng phục hồi.
	submit	type="submit"	Xác định loại hiển thị dạng submit.
	text	type="text"	Xác định loại hiển thị dạng text..
value	Giá trị	value="Gửi"	Xác định giá trị của <input />.

Thuộc tính tổng quát (xem thêm)

Thuộc tính	Giá trị	Ví dụ	Mô tả
accesskey	Ký tự	accesskey="g"	Xác định một phím tắc để truy cập vào một thành phần.
class	Tên class	class="section"	Tên class
dir	rtl ltr	dir="rtl"	Xác định hướng văn bản cho các nội dung trong một thành phần.
id	Tên id	id="layout"	Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id chỉ có trong một thành phần) trong một văn bản HTML
lang	Mã ngôn ngữ	lang="vi"	Xác định mã ngôn ngữ cho nội dung trong một thành phần.
style	Kiểu định dạng	style="color: red"	Xác định một định dạng cho một thành phần.
tabindex	Số	tabindex="5"	Xác định thứ tự tab của một thành phần.
title	Text	title="Đây là title"	Xác định thêm thông tin cho thành phần.
xml:lang	Mã ngôn ngữ	lang="vi"	Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.

Thuộc tính sự kiện

Không được hỗ trợ trong DTD Strict

Thuộc tính	Giá trị	Ví dụ	Mô tả
onclick	Code script	onclick="code"	Script chạy khi click chuột.
ondblclick	Code script	ondblclick="code"	Script chạy khi double click chuột.
onmousedown	Code script	onmousedown="code"	Script chạy khi button chuột được nhấn.
onmousemove	Code script	onmousemove="code"	Script chạy khi di chuyển con trỏ chuột.
onmouseout	Code script	onmouseout="code"	Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần.
onmouseover	Code script	onmouseover="code"	Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần.
onmouseup	Code script	onmouseup="code"	Script chạy khi button chuột được thả ra.
onkeydown	Code script	onkeydown="code"	Script chạy khi nút trên bàn phím được nhấn.
onkeypress	Code script	onkeypress="code"	Script chạy khi nút trên bàn phím được nhấn và thả ra.
onkeyup	Code script	onkeyup="code"	Script chạy khi nút trên bàn phím được thả ra.

Link liên quan

<br />
<p></p>

Tag trước

Tag kế tiếp

HTML & XHTML

HƯỚNG DẪN HỌC

Hướng dẫn học
Hướng dẫn học XHTML & HTML5
Hướng dẫn học CSS
Hướng dẫn học CSS3
Hướng dẫn học Responsive
Hướng dẫn học ES6
Hướng dẫn học React.js
Hướng dẫn học jQuery
Hướng dẫn học PHP
Hướng dẫn học Laravel
Hướng dẫn học Wordpress
Hướng dẫn học Webpack
Hướng dẫn học SCSS

THAM KHẢO

Tham khảo CSS

CSS - Tham khảo
CSS - Bộ chọn (selectors)
CSS - Thuộc tính
CSS3 - Tham khảo
CSS3 - Bộ chọn (selectors)
CSS3 - Thuộc tính
Xem thêm ví dụ về CSS

Tham khảo HTML/XHTML

Tham khảo HTML/XHTML
Tag theo function
Tag theo giá trị DTD
Tham khảo HTML4/XHTML
Tham khảo HTML5
Xem thêm ví dụ về HTML

Tham khảo JQUERY

jQuery - Tham khảo
jQuery - Cài đặt và sử dụng
jQuery - Bộ chọn (selectors)
jQuery - Hàm (function)
jQuery - Ajax

Tham khảo Thêm

Lang codes
Font chữ
Mã ký tự
MIME
Đơn vị trong HTML & CSS
Giá trị màu trong HTML & CSS
Thuộc tính tổng quát

CHUYÊN ĐỀ

Chuyên đề
Chuyên đề HTML/CSS
Chuyên đề HTML5/CSS3
Chuyên đề jQuery/JS
jQuery/JS plugin

GÓP Ý - LIÊN HỆ

CÔNG CỤ TẠO CSS3CSS3 GENERATOR
BỘ CÔNG CỤGENERATOR TOOLS
CÔNG CỤ HỖ TRỢWEB TOOLS
CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
CÔNG CỤ KIỂM TRA RESPONSIVE TEST
CHIA SẺ HAYWEB & TOOLS

Từ khóa » Cách Css Input

Định nghĩa và sử dụng

Sự khác nhau giữa HTML và XHTML

Cấu trúc

Ví dụ

Html viết:

Hiển thị trình duyệt:

Các loại (type) <input />

Input dạng text:

Input dạng password:

Input dạng hidden:

Input dạng checkbox:

Input dạng radio:

Input dạng button:

Input dạng button reset:

Input dạng button submit:

Input dạng image:

Input dạng file upload:

Trình duyệt hỗ trợ

Thuộc tính

Thuộc tính tùy chọn

Thuộc tính tổng quát (xem thêm)

Thuộc tính sự kiện

Link liên quan

HTML & XHTML

HƯỚNG DẪN HỌC

THAM KHẢO

Tag HTML & XHTML

Tham khảo CSS

Tham khảo HTML/XHTML

Tham khảo JQUERY

Tham khảo Thêm

CHUYÊN ĐỀ

GÓP Ý - LIÊN HỆ

Liên Hệ