0Pricing
HTML Academy · レッスン

入力タイプ：text、password、email、number、tel

データ項目ごとに適切なinput typeを使います。

「入力タイプ：text、password、email、number、tel」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

input要素

<input>要素は、さまざまなフォームコントロールを作成します。type属性によって種類が決まります：

<input type="text">      <!-- single-line text -->
<input type="password"> <!-- masked text -->
<input type="email">    <!-- email address -->
<input type="number">   <!-- numeric -->
<input type="tel">      <!-- phone number -->

type=text

デフォルトのinputタイプで、1行のテキストフィールドです：

<label for="username">Username</label>
<input
  type="text"
  id="username"
  name="username"
  placeholder="e.g. jane_doe"
  maxlength="50"
  autocomplete="username"
>

type=password

password入力では、ユーザーが入力した文字がマスクされます：

<label for="pwd">Password</label>
<input
  type="password"
  id="pwd"
  name="password"
  minlength="8"
  autocomplete="current-password"
  required
>
<!-- Browser may offer to save/fill the password -->
<!-- autocomplete="new-password" for registration forms -->

type=email

email入力では、モバイルとデスクトップでメールアドレスの形式が検証されます：

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="you@example.com"
  autocomplete="email"
  required
>
<!-- Mobile: shows @ on keyboard -->
<!-- Browser validates basic email format on submit -->

type=number

number入力では、スピンコントロール付きで数値を受け付けます：

<label for="qty">Quantity</label>
<input
  type="number"
  id="qty"
  name="quantity"
  min="1"
  max="100"
  step="1"
  value="1"
>
<!-- min, max, step control allowed values -->
<!-- Mobile: shows numeric keypad -->
<!-- Note: only integers with step=1; decimals need step="0.01" -->

type=tel

tel入力では、形式を検証せずに電話番号を受け付けます：

<label for="phone">Phone number</label>
<input
  type="tel"
  id="phone"
  name="phone"
  placeholder="+1 (555) 555-0100"
  pattern="[+][0-9 ()-]{7,20}"
  autocomplete="tel"
>
<!-- Mobile: shows phone keypad -->
<!-- No built-in validation — phone formats vary globally -->
<!-- Use pattern attribute for format validation -->

name属性は必須

name属性によって、サーバーは各フィールドを識別します：

<form action="/search">
  <!-- Without name, the field is NOT sent with the form -->
  <input type="text" name="q" placeholder="Search">
  <button type="submit">Search</button>
</form>
<!-- Submits: /search?q=your+search+term -->
<!-- name="q" → the key in the submitted data -->

プレースホルダーとラベルの違い

placeholder属性は入力例を示します。ただし、ラベルの代わりには決して使用しないでください：

<!-- BAD: placeholder as label -->
<input type="text" placeholder="Enter your name">

<!-- GOOD: label + helpful placeholder -->
<label for="name">Full name</label>
<input type="text" id="name" name="name" placeholder="e.g. Jane Smith">
<!-- Placeholder disappears on typing — screen readers often skip it -->

valueとdefaultValue

value属性を使って、入力欄にあらかじめ値を入力しておきます：

<input type="text" name="country" value="United States">
<!-- Renders with 'United States' pre-filled -->

<input type="number" name="qty" value="1" min="1" max="10">
<!-- Default quantity of 1 -->

disabledとreadonly

入力欄を編集不可にする方法は2つあります：

<input type="text" value="Fixed value" readonly>
<!-- readonly: user can see and select text, but not edit it -->
<!-- Value IS submitted with the form -->

<input type="text" value="Disabled" disabled>
<!-- disabled: user cannot interact with it at all -->
<!-- Value is NOT submitted with the form -->
<!-- NOT in tab order -->

inputのautocomplete値

適切なautocomplete値を指定すると、ブラウザーの自動入力の精度が向上します：

<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="street" autocomplete="address-line1">
<input type="text" name="city" autocomplete="address-level2">
<input type="text" name="zip" autocomplete="postal-code">
<input type="password" autocomplete="new-password">

確認問題

電話番号の入力欄には、どのinputタイプを使用すべきですか？

まとめ：inputタイプ

よく使うinputタイプ：

  • type="text" — 一般的なテキスト（デフォルト）
  • type="password" — マスクされるテキスト。autocomplete="new-password"を使用します
  • type="email" — モバイルで@キーが表示されるメールアドレス入力
  • type="number" — min/max/stepを指定できる数値入力
  • type="tel" — 電話用キーパッドが表示される電話番号入力
  • 必ずnameと関連付けた<label>を指定します

よくある質問

「入力タイプ：text、password、email、number、tel」レッスンは無料ですか？

はい。「入力タイプ：text、password、email、number、tel」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「入力タイプ：text、password、email、number、tel」で何を学びますか？

データ項目ごとに適切なinput typeを使います。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「入力タイプ：text、password、email、number、tel」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. form要素：action、method、enctype
  2. 入力タイプ：text、password、email、number、tel
  3. label要素とアクセシビリティ
  4. button要素：submit、reset、button
← HTML Academyに戻る