3.1 Elemento <input type="button">
L'elemento <input type="button"> viene usato per creare un pulsante che non ha un comportamento predefinito. A differenza dei pulsanti submit e reset, che eseguono azioni specifiche quando cliccati, il pulsante button viene solitamente utilizzato in combinazione con JavaScript per eseguire compiti specifici.
Esempio di utilizzo:
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
Attributi principali:
1. Attributo value: imposta il testo che verrà visualizzato sul pulsante.
<input type="button" value="Click Me">
2. Attributo onclick: definisce la funzione JavaScript che verrà eseguita quando il pulsante viene cliccato.
<input type="button" value="Click Me" onclick="myFunction()">
function myFunction() {
alert('Button clicked!');
}
Esempi di utilizzo:
Chiamata di una funzione JavaScript:
<input type="button" value="Show Alert" onclick="showAlert()">
function showAlert() {
alert('This is an alert!');
}
Modifica dello stile dell'elemento:
<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 Elemento <input type="checkbox">
L'elemento <input type="checkbox"> viene utilizzato per creare caselle di controllo che consentono agli utenti di selezionare una o più opzioni tra quelle proposte. La casella può essere attivata o disattivata.
Esempio di utilizzo:
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
Attributi principali:
1. Attributo name: imposta il nome dell'elemento del form, che verrà inviato al server insieme ai dati.
<input type="checkbox" name="subscribe">
2. Attributo value: imposta il valore che verrà inviato al server se la casella è selezionata.
<input type="checkbox" name="subscribe" value="yes">
3. Attributo checked: determina se la casella deve essere selezionata di default.
<input type="checkbox" name="subscribe" value="yes" checked>
Esempi di utilizzo:
Diverse caselle di controllo:
<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>
Casella di controllo con valore preimpostato:
<input type="checkbox" name="terms" value="agree" checked> I agree to the terms and conditions
3.3 Elemento <input type="radio">
Campo per selezione radio button (type="radio")
L'elemento <input type="radio"> viene utilizzato per creare "radio button" che consentono agli utenti di scegliere solo un'opzione da un gruppo. I radio button sono raggruppati con lo stesso valore dell'attributo name.
Esempio di utilizzo:
<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>
Attributi principali:
Attributo name: imposta il nome del gruppo di radio button. Tutti i radio button con lo stesso nome apparterranno a un unico gruppo e l'utente potrà selezionare solo uno di essi.
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
Attributo value: imposta il valore che verrà inviato al server se il radio button è selezionato.
<input type="radio" name="gender" value="male">
Attributo checked: determina se il radio button deve essere selezionato di default.
<input type="radio" name="gender" value="male" checked>
Esempi di utilizzo:
Gruppo di radio button per selezione di un'opzione:
<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>
Radio button con valore preimpostato:
<input type="radio" name="subscription" value="monthly" checked>Monthly<br>
<input type="radio" name="subscription" value="yearly">Yearly<br>
GO TO FULL VERSION