2.8 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d778b367417b2b2512aa8 | Aggiungere un selettore di data accessibile | 0 | https://scrimba.com/c/cR3bRbCV | 301008 | add-an-accessible-date-picker |
--description--
I moduli spesso includono il campo input
, che può essere usato per creare diversi tipi di controlli. L'attributo type
indica che tipo di elemento input
sarà creato.
Potresti aver notato i tipi di input text
e submit
nelle sfide precedenti, e HTML5 ha introdotto anche un'opzione per specificare un campo date
. A seconda del supporto del browser, un selettore di date appare nel campo input
quando è selezionato, il che rende la compilazione del modulo più semplice per tutti gli utenti.
Nei browser più vecchi il tipo sarà predefinito a text
, quindi è utile mostrare agli utenti il formato di data previsto nella label
o nel testo placeholder
per sicurezza.
Ecco un esempio:
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
--instructions--
Camper Cat sta organizzando un torneo di Mortal Kombat e vuole chiedere ai suoi concorrenti di vedere quale data sia la migliore. Aggiungi un tag input
con un attributo type
pari a date
, un attributo id
pari a pickdate
e un attributo name
pari a date
.
--hints--
Il tuo codice dovrebbe aggiungere un tag input
per il campo di selezione della data.
assert($('input').length == 2);
Il tuo tag input
dovrebbe avere un attributo type
con un valore di date
.
assert($('input').attr('type') == 'date');
Il tuo tag input
dovrebbe avere un attributo id
con un valore di pickdate
.
assert($('input').attr('id') == 'pickdate');
Il tuo tag input
dovrebbe avere un attributo name
con un valore di date
.
assert($('input').attr('name') == 'date');
--seed--
--seed-contents--
<body>
<header>
<h1>Tournaments</h1>
</header>
<main>
<section>
<h2>Mortal Kombat Tournament Survey</h2>
<form>
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
<!-- Only change code below this line -->
<!-- Only change code above this line -->
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer>© 2018 Camper Cat</footer>
</body>
--solutions--
<body>
<header>
<h1>Tournaments</h1>
</header>
<main>
<section>
<h2>Mortal Kombat Tournament Survey</h2>
<form>
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
<input type="date" id="pickdate" name="date">
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer>© 2018 Camper Cat</footer>
</body>