Hướng dẫn input value html - giá trị đầu vào html
Ngày hôm nay mình sẽ giới thiệu đến bạn cách để lấy giá trị trong ô input bằng Javascript nhé.
Cách Get Vaue Input HTML
Sau đây mình sẽ giới thiệu đến bạn các cách để chúng ta có thể lấy được giá trị của ô input trong Javascript nha.
Sử Dụng getElementById
Trong phần này mình sẽ lấy value của ô input thông qua thuộc tính getElementById
của js nha.
HTML
Javascript
function submitForm[event]{
event.preventDefault[];
var ele = document.getElementById["valueInput"];
document.getElementById['results'].innerHTML = `Giá Trị ô input ${ele.value}`
}
Ở đoạn mã javascript mình sử dụng event.preventDefault[]
ngăn không cho form submit để chúng ta có thể dễ dàng hiển thị kết quả của ô input. Còn nếu dùng trong thực tế thì bạn không cần sử dụng tính năng nhé.
Và kết quả bạn xem trên Codepen nha.
See the Pen Untitled by haycuoilennao19 [@haycuoilennao19] on CodePen.
Sử Dụng getElementsByClassName
Tiếp theo mình sẽ sử dụng getElementsByClassName
để lấy giá trị trong ô input text thông qua cú pháp sau nha:
document.getElementsByClassName['Tên Class'][Số thứ tự].value
Ở đây mình xin giải thích một tý là trong một trang HTML thì sẽ có các phần tử có class trùng với nhau. Do đó bạn cần phải xác định được vị trí ô input để sử dụng cho đúng nha. Dưới đây là ví dụ nha trên Codepen nha.
See the Pen get value input by class name by haycuoilennao19 [@haycuoilennao19] on CodePen.
Sử Dụng getElementsTagClassName
Phần này mình sẽ sử dụng document.getElementsByTagName
để lấy giá trị thông qua cú pháp sau nha:
document.getElementsByTagName['tên thẻ'][số thứ tự]
Nó cũng giống như class là cũng cần phải sử dụng số thự tự nha. Để dễ hình dung bạn xem kết quả dưới đây nhé.
See the Pen get value input by tag name by haycuoilennao19 [@haycuoilennao19] on CodePen.
Sử Dụng Jquery
Phần cuối cùng mình sẽ hướng dẫn bạn sử dụng thuộc tính
function submitForm[event]{
event.preventDefault[];
var ele = document.getElementById["valueInput"];
document.getElementById['results'].innerHTML = `Giá Trị ô input ${ele.value}`
}
0 của thư viện Jquery để lấy nội dung trong ô input mỗi khi người dùng nhập vào nhé.HTML
Javascript
$['#valueInput'].keyup[function[] {
var ele = this.value;
document.getElementById['results'].innerHTML = `Giá Trị ô input ${ele}`;
}];
Ở đoạn mã javascript mình sử dụng event.preventDefault[]
ngăn không cho form submit để chúng ta có thể dễ dàng hiển thị kết quả của ô input. Còn nếu dùng trong thực tế thì bạn không cần sử dụng tính năng nhé.
Và kết quả bạn xem trên Codepen nha.
See the Pen Untitled by haycuoilennao19 [@haycuoilennao19] on CodePen.
Sử Dụng getElementsByClassName
Xác định thêm thông tin cho thành phần.
Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.
Xác định mã ngôn ngữ cho nội dung trong một thành phần.
Xác định mã ngôn ngữ cho nội dung trong một thành phần.
Xác định mã ngôn ngữ cho nội dung trong một thành phần.
Được sử dụng cho nhiều lựa chọn khác nhau.
Được sử dụng cho một chọn lựa duy nhất. Các phải cùng "name", nếu không sẽ không chọn được.
Các phải cùng "name", nếu không sẽ không chọn được.
Được sử dụng cho một chọn lựa duy nhất. Các phải cùng "name", nếu không sẽ không chọn được.
Dùng để reset lại giá trị trong .
Input dạng button reset:Dùng để reset lại giá trị trong .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 .
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. Không được hỗ trợ trong phần lớn các trình duyệt.
|
Trình duyệt hỗ trợ | được hỗ trợ trong đa số các trình duyệt. right top middle
bottom
| Thuộc tính | Cách sử dụng: 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
|
Thuộc tính tùy chọn | 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 | align | left right top middle bottom | align="left" |
Được dùng để sắp xếp vị trí cho image của [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 [chỉ cho type="image"] | Xác định alt cho image của [chỉ cho type="image"] | checked | checked |
checked="checked" | checked="checked" | Xác định một thành phần được chọn trước khi tải trang [sử dụng đối với type="checkbox" hay type="radio"] | disabled |
disabled="disabled" | alt | Text | alt="Đây là alt" |
Xác định alt cho image của [chỉ cho type="image"] | checked | checked | checked="checked" |
Xác định một thành phần được chọn trước khi tải trang [sử dụng đối với type="checkbox" hay type="radio"] | disabled | disabled="disabled" | Xác định một thành phần 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 [sử dụng đối với type="text" hay type="password"] | name | name="inputName" |
Xác định tên cho thành phần . | readonly | readonly="readonly" |
Xác định rằng trường chỉ được đọc [sử dụng đối với type="text" hay type="password"] | size | size="30" |
Xác định chiều rộng của một trường . | 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 |
Được dùng để sắp xếp vị trí cho image của [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