JavaScript

Chromeのデベロッパーコンソールからフォームを入力しよう

フォームオブジェクトに関する知識を得られます

問題: 1

今回の問題は開発ツールであるデベロッパーコンソールからフォームを入力する問題です。


ページ内で右クリックをすると(要素を)検証という項目があると思います。
それをクリックするとデベロッパーツールというものが現れ、更にそこからconsoleのパネルをクリックするとデベロッパーコンソールが立ち上がります。


以下の画像のようにコンソールを立ち上げて、フォームを入力していってもらいます


https://tech-drill.s3.amazonaws.com/uploads/questions/images/d8f84b2576288d9d58bb520eb7361911.png


まずは以下のファイルを用意してください。


sample_form.html
<html>
  <head>
    <meta charset="UTF-8" />
    <title>デベロッパーコンソールからフォームを入力しよう</title>
    <style>
    .content{
      padding: 20px;
    }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>デベロッパーコンソールからフォームを入力しよう</h1>
      <form name="testform">
      名前
      <br/>
      <input type="text" name="full_name" disabled="ture">
      <br/>
      <input type="radio" name="sex" value="man" disabled="ture">男性
      <input type="radio" name="sex" value="woman" disabled="ture">女性
      <br/>
      今日の日付
      <br/>
      <input type="date" name="date" disabled="ture">
      <br/>
      <input type="checkbox" name="group_1" value="1" disabled="ture">チェックボックス1
      <br/>
      <input type="checkbox" name="group_1" value="2" disabled="ture">チェックボックス2
      <br/>
      <input type="checkbox" name="group_1" value="3" disabled="ture">チェックボックス3
      <br/>
      <input type="checkbox" name="group_2" value="4" disabled="ture">チェックボックス4
      <br/>
      <input type="checkbox" name="group_2" value="5" disabled="ture">チェックボックス5
      <br/>
      <input type="checkbox" name="group_2" value="6" disabled="ture">チェックボックス6
      <br/>
      <input type="reset" name="" value="リセット" disabled="ture">
      <br/>
      </form>
  </div>
  </body>
</html>

ここで用意されているフォームの入力欄やチェックボックスにはあえてdisabled="ture"属性を設定しており、直接文字を入力することができないようにしています。


以下の5つの指示に従ってください。


なお、作業は全てGoogle Chromeのデベロッパーコンソールで行ってください


①フォームの名前(name属性)を取得してください
②フォームの要素(inputタグなど)の総数を取得してください
③名前、性別、今日の日付を入力してください
④チェックボックス1と3と6をチェックしてください
⑤リセットボタンからformをリセットしてください


以上の5つが行えたら問題は終了になります。
お疲れ様でした!