input
入力フォーム

version 
2.0
3.2
4.0
5.0
分類(HTML5)
フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ(条件付)
分類(HTML4)
inline要素
機能分類
フォーム
終了タグ

フォーム内にいろいろな仕掛けを作る。

  • *
    【属性】
    • -
      type
      仕掛けの種類
      選択肢
      textテキスト 
      passwordパスワード  
      checkboxチェックボックス 
      radio ラジオボタン  
      submit 送信ボタン  
      reset リセットボタン 
      file ファイル  
      hidden 隠しデータ  
      image イメージ画像ボタン 
      button ボタン (HTML4新設)
      seach 検索 (HTML5新設)
      tel 電話番号 (HTML5新設)
      url URL (HTML5新設)
      email 電子メール (HTML5新設)
      datetime日時 (HTML5新設)
      datetime-local日時 (HTML5新設)
      date (HTML5新設)
      month (HTML5新設)
      week (HTML5新設)
      time 時間 (HTML5新設)
      number 数値 (HTML5新設)
      range 範囲 (HTML5新設)
      color (HTML5新設)
    • -
      name
      submit,reset以外で必要
      name="Button1"
      この「名前」はCGIでサーバに送るときの「名前」として使用されます。form要素内でtype=radioを除いて別名であることが望ましいです。
    • -
      value
      radio,checkbox以外で必要
      value="Data1"
      type=text,password,file,hidden,のときは、この値がCGIでサーバに送るときの「値」として使用されます。
    • -
      checked
      radio,checkbox用
      選択肢初期にチェックする場合のみ記述
      type=radio,checkbox のとき、初期値としてon/offを指定する属性です。
    • -
      size
      サイズの指定
      type=text,password,file のときの表示上のサイズを指定します。
    • -
      maxlength
      最大入力文字数
      type=text,password のときの最大入力文字数を指定します。全角でも半角でも1文字は1とカウントされます。
    • -
      src
      画像のURL
      src="map.gif"
      type=image のとき、イメージ画像のURLを指定します。
    • -
      align
      配置
      選択肢top,middle,bottom
      left,right
      align="top"
    • -
      disabled
      この要素を無効化する
      versionHTML4で新設
    • -
      readonly
      読出専用とする
      versionHTML4で新設
    • -
      alt
      簡単な説明文
      alt="名前の入力"
      versionHTML4で新設
    • -
      accept
      受入れ可能なMIMEタイプ
      versionHTML4で新設
    • -
      autocomplete
      オートコンプリートの指定
      選択肢on,off
      autocomplete="on"
      versionHTML5で新設
    • -
      form
      form要素のid属性と関連付け
      versionHTML5で新設
    • -
      formaction
      実行する URL
      versionHTML5で新設
    • -
      formmethod
      フォーム送信時メソッド
      選択肢get,post
      formmethod=get
      versionHTML5で新設
    • -
      formenctype
      コンテントタイプ
      選択肢application/x-www-form-urlencoded
      multipart/form-data
      text-plain
      enctype="multipart/form-data"
      versionHTML5で新設
    • -
      formnovalidate
      送信時の検証をなくす
      <input type=submit formnovalidate name=save value="保存">
      versionHTML5で新設
    • -
      list
      選択肢の指定
      versionHTML5で新設
    • -
      max
      最大値の指定
      versionHTML5で新設
    • -
      min
      最少値の指定
      versionHTML5で新設
    • -
      multiple
      複数項目入力可能
      versionHTML5で新設
    • -
      pattern
      入力のパターンの指定
      versionHTML5で新設
    • -
      placeholder
      プレイスホルダーの指定
      versionHTML5で新設
    • -
      required
      必須項目の指定
      versionHTML5で新設
    • -
      step
      入力値のステップの指定
      versionHTML5で新設
    • -
      width
      幅の指定(ピクセル)
      versionHTML5で新設
    • -
      height
      高さの指定(ピクセル)
      versionHTML5で新設
  • *
    【例】

    <form action="html_tag/sample.php" methiod="post">
    name<input type="text" size="10" >
    <input type="submit" value="送信">
    </form>
    <hr>

    <p>テキスト <input type="text" value=""></p>
    <p>パスワード <input type="password" value=""></p>
    <p>チェックボックス <input type="checkbox" value=""></p>
    <p>ラジオボタン <input type="radio" value=""></p>
    <p>送信ボタン <input type="submit" value="保存"></p>
    <p>リセットボタン <input type="reset" value="リセット"></p>
    <p>ファイル <input type="file" value=""></p>
    <p>隠しデータ <input type="hidden" value=""></p>
    <p>イメージ画像 <input type="image" src="abc.gif"></p>
    <p>ボタン <input type="button" value="ボタン"></p>
    <p>検索 <input type="seach" value=""> (HTML5で新設)</p>
    <p>電話番号 <input type="tel" value=""> (HTML5で新設)</p>
    <p>URL <input type="url" value=""> (HTML5で新設)</p>
    <p>電子メール <input type="email" value=""> (HTML5で新設)</p>
    <p>日時 <input type="datetime" value=""> (HTML5で新設)</p>
    <p>日時 <input type="datetime-local" value=""> (HTML5で新設)</p>
    <p>日 <input type="date" value=""> (HTML5で新設)</p>
    <p>月 <input type="month" value=""> (HTML5で新設)</p>
    <p>週 <input type="week" value=""> (HTML5で新設)</p>
    <p>時間 <input type="time" value=""> (HTML5で新設)</p>
    <p>数値 <input type="number" value=""> (HTML5で新設)</p>
    <p>範囲 <input type="range" value=""> (HTML5で新設)</p>
    <p>色 <input type="color" value=""> (HTML5で新設)</p>

    あなたのブラウザでの見え方

  • *
    【関連タグ】

    form textarea select