<h1 class="contact-title">お問い合わせ</h1>
<form action="">
  <dl>
    
    <dt>
      <label for="name">お名前</label>
      <span class="required">必須</span>
    </dt>
    <dd>
      <input id="name" type="text" placeholder="山田 太郎" required />
    </dd>

    
    <dt>
      <label for="email">メールアドレス</label>
      <span class="required">必須</span>
    </dt>
    <dd>
      <input id="email" type="email" placeholder="taro@xxx.com" required />
    </dd>

    
    <dt>
      <label for="tel">電話番号</label>
    </dt>
    <dd><input id="tel" type="tel" placeholder="xxx-xxxx-xxxx" /></dd>

    
    <dt>
      <label for="date">ご希望の日時</label>
    </dt>
    <dd>
      <input id="date" type="date" />
    </dd>

    
    <dt>
      <label>お問い合わせ内容</label>
    </dt>
    <dd>
      <input id="trial" type="checkbox" />
      <label for="trial">体験</label>
      <input id="join" type="checkbox" />
      <label for="join">入会</label>
      <input id="lw" type="checkbox" />
      <label for="lw">休会・退会</label>
      <input id="other" type="checkbox" />
      <label for="other">その他</label>
    </dd>

    
    <dt>
      <label for="gender">性別</label>
    </dt>
    <dd>
      <input id="male" type="radio" name="gender" />
      <label for="male">男性</label>
      <input id="female" type="radio" name="gender" />
      <label for="female">女性</label>
    </dd>

    
    <dt>
      <label for="instructor">ご希望のインストラクター</label>
    </dt>
    <dd>
      <select id="instructor">
        <option selected>選択してください</option>
        <option>田中</option>
        <option>鈴木</option>
        <option>佐藤</option>
      </select>
    </dd>

    
    <dt>
      <label for="question">ご質問など</label>
    </dt>
    <dd>
      <textarea id="question" rows="5"></textarea>
    </dd>

    
    <input type="submit" value="送信" class="submit-button" />
  </dl>
</form>
<script>
  const button = document.querySelector('.submit-button')
  button.addEventListener(
    'click',
    function () {
      console.log('送信ボタンが押されました')
    },
    false
  )
</script>

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  font-size: 14px;
  box-sizing: border-box;
  color: #333333;
}

/* お問い合わせ タイトル */
.contact-title {
  font-size: 24px;
  color: #495b65;
  text-align: center;
  position: relative;
  margin: 40px 0 40px 0;
}
.contact-title::after {
  content: '';
  width: 50px;
  height: 3px;
  display: inline-block;
  background-color: #495b65;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 25px);
}

/* 送信ボタン */
.submit-button {
  margin: 0 auto;
  background-color: #495b65;
  color: white;
  padding: 8px 64px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
}

/* フォーム */

.required {
  color: white;
  background-color: #db9281;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-right: 24px;
}

dl {
  width: 480px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 auto;
}
dt {
  width: 42%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0;
}
dd {
  width: 58%;
  justify-content: space-between;
  margin: 30px 0;
}
dd label {
  margin-right: 24px;
}

input[type='text'],
input[type='email'],
input[type='tel'] {
  border: solid 1px #b3b3b3;
  border-radius: 4px;
  font-size: 16px;
  color: #333333;
  width: 100%;
  height: 48px;
  background-color: #fff8f3;
  padding: 24px 16px;
}

select,
input[type='date'] {
  width: 160px;
  height: 48px;
  color: #333333;
  background-color: #fff8f3;
  border: solid 1px #b3b3b3;
  border-radius: 4px;
  text-align: center;
  font: inherit;
}

textarea {
  width: 100%;
  padding: 24px 16px;
  background-color: #fff8f3;
  border: solid 1px #b3b3b3;
  border-radius: 4px;
  font: inherit;
}

input:invalid {
  /* 問題1. 入力エラー時のスタイリングをしよう */
  border: solid 2px red;
}


:invalid

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  font-size: 14px;
  box-sizing: border-box;
  color: #333333;
}

/* お問い合わせ タイトル */
.contact-title {
  font-size: 24px;
  color: #495b65;
  text-align: center;
  position: relative;
  margin: 40px 0 40px 0;
}
.contact-title::after {
  content: '';
  width: 50px;
  height: 3px;
  display: inline-block;
  background-color: #495b65;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 25px);
}

/* 送信ボタン */
.submit-button {
  margin: 0 auto;
  background-color: #495b65;
  color: white;
  padding: 8px 64px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
}

/* フォーム */

.required {
  color: white;
  background-color: #db9281;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-right: 24px;
}

dl {
  width: 480px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 auto;
}
dt {
  width: 42%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0;
}
dd {
  width: 58%;
  justify-content: space-between;
  margin: 30px 0;
}
dd label {
  margin-right: 24px;
}

input[type='text'],
input[type='email'],
input[type='tel'] {
  border: solid 1px #b3b3b3;
  border-radius: 4px;
  font-size: 16px;
  color: #333333;
  width: 100%;
  height: 48px;
  background-color: #fff8f3;
  padding: 24px 16px;
}

select,
input[type='date'] {
  width: 160px;
  height: 48px;
  color: #333333;
  background-color: #fff8f3;
  border: solid 1px #b3b3b3;
  border-radius: 4px;
  text-align: center;
  font: inherit;
}

textarea {
  width: 100%;
  padding: 24px 16px;
  background-color: #fff8f3;
  border: solid 1px #b3b3b3;
  border-radius: 4px;
  font: inherit;
}

input:invalid {
  /* 問題1. 入力エラー時のスタイリングをしよう */
}


入力エラー時のスタイリングをしよう

お問い合わせフォームの完成版を見てみよう

<form>

<input type="submit">

お問い合わせフォームを宣言しよう

<input type="text">

placeholder

名前の入力欄を作成しよう

<label>

名前の入力欄に紐づくラベルを作成しよう

<input type="email">

メールアドレスの入力欄を作成しよう

<input type="tel">

電話番号の入力欄を作成しよう

<input type="date">

日付の入力欄を作成しよう

<input type="checkbox">

複数選択できるチェックボックスを作成しよう

<input type="radio">

1つだけ選択できるラジオボタンを作成しよう

<select>

項目が多いときはセレクトボックスを使おう

<textarea>

メッセージ入力欄を作成しよう

required

入力必須項目を指定しよう

メールフォームがWebサイト上で表示されるように、見た目部分を実装します。

「お問い合わせフォームを実装しよう」レッスンの総復習クイズです。

お問い合わせフォームを実装しようの総復習クイズ

お問い合わせフォームを実装しよう

入力エラー時のスタイリングをしよう

まずは必要なスキルを確認しましょう！