2.8 KiB

Raw Blame History

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>&copy; 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>&copy; 2018 Camper Cat</footer>
</body>

2.8 KiB Raw Blame History