<input type="tel">

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

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

    
    <dt>
      
      <label for="tel">電話番号</label>
    </dt>
    <dd>
      
      <input id="tel" type="tel" placeholder="xxx-xxxx-xxxx" />
    </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;
}


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

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

    
    <dt>
      
    </dt>
    <dd>
      
    </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>


    const questions = [
        {
            title: '電話番号の入力欄を作成しよう',
            tests: [
                {
                    title: '`<dd>`タグ内に`*<input type="tel">*`を設置してください。',
                    hint: '手順にあるコードを、`dd`タグ内にコピー&ペーストしてください',
                    test: () => isContainTextInEditor('type="tel"')
                },
                {
                    title: '入力欄の`*placeholder*`を`*xxx-xxxx-xxxx*`と表示させてください',
                    hint: '先ほど設置した`<input type="tel>`の中に、`*placeholder="xxx-xxxx-xxxx"*`を加えます',
                    test: () => isContainTextInEditor('placeholder="xxx-xxxx-xxxx"')
                },
                {
                    title: 'ラベルと紐づけるための属性`*id="tel"*`を指定してください',
                    hint: '先ほど設置した`<input type="tel>`の中に、`*id="tel"*`を加えます',
                    test: () => isContainTextInEditor('id="tel"')
                }
            ]
        },
        {
            title: '電話番号の入力欄のラベルを作成しよう',
            tests: [
                {
                    title: '`<dt>`タグ内に`*<label for="tel">電話番号</label>*`を設置してください。',
                    hint: '手順にあるコードを、`dt`タグ内にコピー&ペーストしてください',
                    test: () => isContainTextInEditor('<label for="tel">電話番号</label>')
                }
            ]
        }
    ];


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

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

<form>

<input type="submit">

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

<input type="text">

placeholder

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

<label>

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

<input type="email">

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

<input type="date">

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

<input type="checkbox">

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

<input type="radio">

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

<select>

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

<textarea>

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

required

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

:invalid

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

お問い合わせフォームの設計から入力エラー時のスタイリング、バリデーション実装までをカバー。ユーザーからの情報収集を効率化する方法を身につけます。

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

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

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