freeCodeCamp

2.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	localeTitle
587d778b367417b2b2512aa8	Add an Accessible Date Picker	0	https://scrimba.com/c/cR3bRbCV	301008	添加可访问的日期选择器

Description

表单中经常出现input标签，它可以用来创建多种表单控件。它的type属性指定了所要创建的input标签类型。在以前的挑战中，你可能已经见过text与submit类型的input标签，HTML5 引入了date类型来创建时间选择器。依赖于浏览器的支持，当点击input标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。对于旧版本的浏览器，type属性的默认值是text。这种情况下，可以利用label标签或者占位文本来提示用户input标签的输入类型为日期。举个例子：

<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">

Instructions

Camper Cat 想举办一场比武大会，他想收集参赛者的最佳参赛时间。请为 Camper Cat 的页面添加一个input标签，其type属性值为 date，id属性为 pickdate，name属性为 date。

Tests

tests:
  - text: '你的代码中应该有 1 个<code>input</code>标签。'
    testString: assert($('input').length == 2);
  - text: '你的<code>input</code>标签的<code>type</code>属性值应该为 date。'
    testString: assert($('input').attr('type') == 'date');
  - text: '你的<code>input</code>标签的<code>id</code>属性值应该为 pickdate。'
    testString: assert($('input').attr('id') == 'pickdate');
  - text: '你的<code>input</code>标签的<code>name</code>属性值应该为 date。'
    testString: assert($('input').attr('name') == 'date');

Challenge Seed

<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>
        
        <!-- Add your code below this line -->



        <!-- Add your code above this line -->
        
        <input type="submit" name="submit" value="Submit">
      </form>
    </section>
  </main>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Solution

// solution required

2.7 KiB Raw Blame History Unescape Escape