F12 pour ouvrir la console et tester les contrôles

Accéder aux valeurs d'un formulaire

1. Si le form et l'input ont un attribut name renseigné:

<form name="leformulaire">
	Nom: <input type="text" name="nom"/>
</form>
<button onclick="alert(document.leformulaire.nom.value);">get value</button>

2. Le DOM contient toujours le tableau des formulaires:

<form action="" method="post">
	<input name="nom"/>
</form>
<button onclick="alert(document.forms[0].nom.value);">value</button>

3. Si l'input a un attribut id renseigné
(Un seul élément de la page peut avoir cet id: un id doit être unique dans la page)

<form action="" method="post">
	<input id="nom"/>
</form>
<button onclick="alert(document.getElementById('nom').value);">value</button>

4. Si l'input a une classe, sort le 1er élément de cette classe:

<form>
	<input class="nom" value="a"/>
</form>
<input class="nom" value="b"/>
<button onclick="alert(document.getElementsByClassName('nom')[0].value);">value</button>

5. Sort le 1er input de la page avec getElementsByTagName():

<form>
	<input value="a"/>
</form>
<input value="b"/>
<button onclick="alert(document.getElementsByTagName('input')[0].value);">value</button>

6. Avec querySelector() et querySelectorAll()

<script>
document.querySelector('#searchTxt').value; //selected by id
document.querySelector('.searchField').value; //selected by class
document.querySelector('input').value; //selected by tagname
document.querySelector('[name="searchTxt"]').value; //selected by name

document.querySelectorAll('#searchTxt')[0].value; //selected by id
document.querySelectorAll('.searchField')[0].value; //selected by class
document.querySelectorAll('input')[0].value; //selected by tagname
document.querySelectorAll('[name="searchTxt"]')[0].value; //selected by name
</script>

7. Le form a un tableau elements
Exemple si l'email ou le message sont vides alors n'envoie pas le formulaire:

<form action="email.php" method="post"
	onsubmit="if (!this.elements[0].value || !this.elements[1].value) return false;">
	<input type="email" name="votreemail" placeholder="votre email"><br>
	<textarea name="msg"</textarea><br>
	<input type="submit" value="Envoyer">
</form>

8. La collection elements dispose aussi de méthodes comme namedItem(name) et item(index) pour récupérer des champs,
avec la différence que namedItem() retourne null si le champ n'existe pas,
alors que l'accès direct via item() retourne undefined.

<form>
  <select id="myFormControl">
    <option id="o1">Option 1</option>
    <option id="o2">Option 2</option>
  </select>
</form>
<script>
let selectElt = document.getElementById("myFormControl");
elem1 = selectElt.namedItem("o1");
alert(elem1.text)
</script>

9. item(name)

<form>
   <select id="maliste">
    <option id="o1">Option 1</option>
    <option id="o2">Option 2</option>
  </select>
</form>

<script>
const liste = document.getElementById("maliste");
const option = liste.item(1);
alert(option.text) // dit "option 2"
</script>

Créer un lien hypertexte

<span id="atest"></span>

<script>
let a = document.createElement("a");
    a.href = '../index.html';
    a.title = "Retourner à l'index";
    a.target = '_blank';

    let texte = document.createTextNode("le texte du lien");
    a.appendChild(texte);

document.getElementById("atest").appendChild(a);
</script>

input type="text"

Avec l'attribut HTML name:

<form name="frm">
    <input type="text" name="a"/>
</form>

<script>
console.log(document.frm.a.value);
document.frm.a.focus();
</script>

Avec l'attibut id:

<input type="text" id="a"/>

<script>
console.log(document.getElementById("a").value);
</script>

input type="date"

test

<input type="date" id="inputdate" name="birthday"
        value="2018-07-22"
        min="2018-01-01" max="2018-12-31"/>

<button onclick="return test();">test</button>

<script>
function test(){
    let d = document.getElementById("inputdate");
    let val = d.value.split('-');
    alert('jour:'+val[2]+' mois:'+val[1]+' année:'+val[0]);
}
</script>

input type="number"

<input type="number" id="number" min="10" max="100" />
<script>
let inpt = document.getElementById("number");
console.log('input number value: '+inpt.value);
</script>

input type="checkbox"

<input type="checkbox" id="chk" checked onclick="chkClick()"/>

<script>
function chkClick(){
    let chk = document.getElementById("chk");
    console.log('checkbox is checked: '+chk.checked); // true or false
}
</script>

input type="radio"

Randonnée
Canoë
Tennis
Natation

<form name="frmradio">
    <input type="radio" name="sport" value="Randonnée" onclick="checkradio(this)"/> Randonnée<br>
    <input type="radio" name="sport" value="Canoë" onclick="checkradio(this)"/> Canoë<br>
    <input type="radio" name="sport" value="Tennis" onclick="checkradio(this)"/> Tennis<br>
    <input type="radio" name="sport" value="Natation" onclick="checkradio(this)"/> Natation<br>
</form>

<script>
function checkradio(radio){
    alert('Vous avez choisi '+radio.value);
}
</script>

input type="color"

La propriété value doit être au format #rrvvbb, pas #rvb ni un nom de couleur.
<input type="color" value="#e66465" onchange="setCouleur(this.value)" style="height:20px">

Liste select option

HTML CSS Javascript PHP SQL

<select id="liste" onchange="checkselect()">
    <option value="HTML">HTML</option>
    <option value="CSS">CSS</option>
    <option value="Javascript">Javascript</option>
    <option value="PHP">PHP</option>
    <option value="PHP">SQL</option>
</select>

<script>
function checkselect(){ // avec this c'est mieux
    //l'élément avec id="liste" est directement accessible par liste:
    console.log('selectedIndex: '+liste.selectedIndex);
    console.log('selected: '+liste.options[liste.selectedIndex].value);

    // sélectionne le 1er
    // liste[0].selected = true;
}
</script>

Ajouter des options à une liste

<script>
  const opt = document.createElement('option');
        opt.value = 'valeur';
        opt.innerHTML = 'texte';
  document.getElementById('monselect').appendChild(opt);

//ou plus concis, si valeur et texte sont les mêmes:
const sel = document.getElementById('annee');
for(n=2020; n<=2023; n++) sel.add(new Option(n)); 
</script>

Accéder au CSS

<style>
body{color:red;}
a{color:pink}
#nom{color:pink}
.nom{color:pink}
</style>

<div class="nom">Joe</div>

<script>
// le document a un objet styleSheets
console.log(document.styleSheets);

// Combien de styles (interne ou externe) dans cette page?
console.log(document.styleSheets.length+' style dans cette page');

// si dans votre page il n'y a qu'un seul CSS (interne ou externe)
console.log(document.styleSheets[0].rules.length+ ' règles'); // ici dit 4

for(n in document.styleSheets[0].rules){
    const selector = document.styleSheets[0].rules[n].selectorText;
    if(selector) console.log('\t'+selector);
}

//modifier le propriété color de la classe .nom
for(n in document.styleSheets[0].rules){
    const regle = document.styleSheets[0].rules[n];
    if(regle.selectorText=='.nom'){
        console.log('avant: '+regle.style['color']);
        regle.style['color'] = '#556677';
        console.log('après: '+regle.style['color']);
        break;
    }
}
</script>

Télécharger un script et l'exécuter/l'utiliser

<script>
let script = document.createElement("script");
script.type = "text/javascript";
script.src = 'data/'+projet+'.js?cache='+(Math.random()*1000000);
script.id = 'SOME_ID';
document.body.appendChild(script);

script.onload = function() {
    // ici code exécuté quand le script est chargé,
    // on peut invoquer le code qui est dans le script
    alert(t[0][0]);
};
</script>