はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
type を正しく指定するメリット
1.スマートフォンのキーボードが最適化される
type 属性を正しく設定すると、スマートフォンでにゅうりょじゅする際のキーボードが、その入力欄に最適なものに自動で切り替わります。
-
type="text"：通常のキーボード -
type="enail"：「@」や「.」が押しやすいキーボード -
type="tel"：数字のテンキー -
type="date"：日付を選択するカレンダー
これにより、ユーザーはより速く、間違いなく入力できるようになります。
2.ブラウザによる自動チェック
2つ目のメリットは、ブラウザが簡単な入力チェックを自動で行ってくれる点です。
例えば、type="email" の入力欄に「@」が含まれていないまま送信しようとすると、「メールアドレスに「@」を含めてください。」のようなエラーメッセージをブラウザが自動で表示してくれます。これにより、開発者が JavaScript で複雑なチェック処理を書かなくても、基本的な入力ミスを防ぐことができます。
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0009</title>
</head>
<body>
<main>
<h1>自己紹介フォーム</h1>
<form action="/submit-form" method="post">
<label for="user-name">名前</label>
<input type="text" id="user-name" name="user-name">
<label for="passeord">パスワード</label>
<input type="password" id="passeord" name="passeord">
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">
<label for="tel">電話番号</label>
<input type="tel" id="tel" name="tel">
<label for="url">ウェブサイト</label>
<input type="url" id="url" name="url">
<label for="age">年齢</label>
<input type="number" id="age" name="age">
<label for="satisfaction">満足度（1〜100）</label>
<input type="range" id="satisfaction" name="satisfaction" min="1" max="100">
<label for="birthday">生年月日</label>
<input type="date" id="birthday" name="birthday">
<label for="favcolor">好きな色</label>
<input type="color" id="favcolor" name="favcolor">
<label for="profilepic">プロフィール画像</label>
<input type="file" id="profilepic" name="profilepic">
<label for="newsletter">ニュースレター</label>
<input type="checkbox" id="newsletter" name="newsletter">
<fieldset>
<legend>性別</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">その他</label>
</fieldset>
<button type="submit">送信</button>
</form>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>