3.1 Phần tử <input type="button">
Phần tử <input type="button"> được sử dụng để tạo nút không có hành vi mặc định.
Khác với các nút submit và reset, mà thực hiện các hành động nhất định khi bấm, nút button thường được
sử dụng kết hợp với JavaScript để thực hiện các công việc cụ thể.
Ví dụ sử dụng:
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
Thuộc tính chính:
1. Thuộc tính value: đặt văn bản sẽ được hiển thị trên nút.
<input type="button" value="Click Me">
2. Thuộc tính onclick: xác định hàm JavaScript sẽ thực thi khi bấm nút.
<input type="button" value="Click Me" onclick="myFunction()">
function myFunction() {
alert('Button clicked!');
}
Ví dụ sử dụng:
Gọi hàm JavaScript:
<input type="button" value="Show Alert" onclick="showAlert()">
function showAlert() {
alert('This is an alert!');
}
Thay đổi kiểu dáng phần tử:
<input type="button" value="Change Color" onclick="changeColor()">
<p id="text">This is a paragraph.</p>
function changeColor() {
document.getElementById('text').style.color = 'blue';
}
3.2 Phần tử <input type="checkbox">
Phần tử <input type="checkbox"> được dùng để tạo checkbox, cho phép người dùng chọn một hoặc nhiều tùy chọn.
Checkbox có thể được bật hoặc tắt.
Ví dụ sử dụng:
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
Thuộc tính chính:
1. Thuộc tính name: Đặt tên cho phần tử form sẽ được gửi tới server cùng với dữ liệu.
<input type="checkbox" name="subscribe">
2. Thuộc tính value: Xác định giá trị sẽ được gửi tới server nếu checkbox được đánh dấu.
<input type="checkbox" name="subscribe" value="yes">
3. Thuộc tính checked: Xác định xem checkbox có được đánh dấu mặc định hay không.
<input type="checkbox" name="subscribe" value="yes" checked>
Ví dụ sử dụng:
Nhiều checkbox:
<p>Select your interests:</p>
<input type="checkbox" name="interest" value="sports">Sports<br>
<input type="checkbox" name="interest" value="music">Music<br>
<input type="checkbox" name="interest" value="movies">Movies<br>
Checkbox với giá trị mặc định:
<input type="checkbox" name="terms" value="agree" checked> I agree to the terms and conditions
3.3 Phần tử <input type="radio">
Trường để chọn radiobutton (type="radio")
Phần tử <input type="radio"> được dùng để tạo "radiobutton", cho phép người dùng chọn một lựa chọn duy nhất
từ nhóm. Radiobuttons được nhóm lại với nhau bằng cách sử dụng cùng một giá trị thuộc tính name.
Ví dụ sử dụng:
<p>Choose your gender:</p>
<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>
Thuộc tính chính:
Thuộc tính name: Đặt tên cho nhóm radiobutton. Tất cả các radiobutton có cùng tên
sẽ thuộc về một nhóm và người dùng chỉ có thể chọn một trong số chúng.
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
Thuộc tính value: Xác định giá trị sẽ được gửi tới server nếu radiobutton được chọn.
<input type="radio" name="gender" value="male">
Thuộc tính checked: Xác định xem radiobutton có được chọn mặc định hay không.
<input type="radio" name="gender" value="male" checked>
Ví dụ sử dụng:
Nhóm radiobutton để chọn một lựa chọn:
<p>Choose a color:</p>
<input type="radio" name="color" value="red">Red<br>
<input type="radio" name="color" value="green">Green<br>
<input type="radio" name="color" value="blue">Blue<br>
Radiobutton với giá trị mặc định:
<input type="radio" name="subscription" value="monthly" checked>Monthly<br>
<input type="radio" name="subscription" value="yearly">Yearly<br>
GO TO FULL VERSION