Form

by yshrkn

HTML

<fieldset id="account">
  <legend>User</legend>
  <label>ID:
    <input type="text" name="id">
  </label>
  <br>
  <label>Password:
    <input type="password" name="password">
  </label>
</fieldset>

<fieldset id="script-type">
  <legend>Script Type</legend>
  <label>
    <input type="radio" name="script" value="js">JavaScript</label>
  <label>
    <input type="radio" name="script" value="cs">CoffeeScript</label>
  <label>
    <input type="radio" name="script" value="ts">TypeScript</label>
</fieldset>

<fieldset id="experience">
  <legend>Experience</legend>
  <select name="experience">
    <option value="">選択してください</option>
    <option value="newbie">初級</option>
    <option value="intermidiate">中級</option>
    <option value="pro">プロ！</option>
  </select>
</fieldset>

<fieldset id="skillset">
  <legend>Skillset</legend>
  <label>
    <input type="checkbox" name="java">Java</label>
  <label>
    <input type="checkbox" name="c">C</label>
  <label>
    <input type="checkbox" name="python">Python</label>
  <label>
    <input type="checkbox" name="ruby">Ruby</label>
</fieldset>

<button id="clear">Clear</button>
<button id="autoFill">Auto Fill</button>

CSS

body {
  padding: 15px;
}

fieldset {
  border: 1px solid #ccc;
  color: #333;
  background-color: #fff;
  margin: 15px 0;
}

JavaScript

/**
 * #autoFillボタンをクリックすると、フォームの各要素が自動で入力・選択されるようにしてください。
 * 入力・選択内容は適当で構いません。
 *
 * また #autoFill ボタンをクリックすると、すべての要素をクリア（初期状態に戻す）されるようにしてください。
 */