 |
ホームページ作成 HTML基礎講座 inputタグ
ホームページ作成・HTML基礎・スタイルシート（CSS)・javascript・SEO対策
|
|
| ■inputタグ：入力フォーム・チェックボックス・送信ボタン等を作成 |
 |
|
【解説】複数項目を選択する場合に使用します。
入力フォーム・チェックボックス・送信ボタン・ラジオボタン等を作成 |
ボタンの作成
<input type="button" name"（1）" value="（2）">
（1）識別名（主にボタンを"script"で制御する場合に使用します）
（2）ボタンの表示文字 |
サンプルソース（ボタン）
<input type="button" name="sample_bu" value="クリック"> |
チェックボックスの作成（複数項目を選択する場合に使用します）
<input type="checkbox" name="（1）" value="（2）" （3）>
（1）識別名
※送信されるデータは"（1）＝（2）"の状態で送信される。
（2）送信内容
（3）デフォルトのチェック項目
※（最初にcheckされた状態でページを開く項目に"checked"を追記する。 |
サンプルソース（チェックボックス）
<input type="checkbox" name="sample_bo1" value="40over" checked>体重40以上<br>
<input type="checkbox" name="sample_bo2" value="50over">体重50以上<br>
<input type="checkbox" name="sample_bo3" value="60over">体重60以上<br> |
ラジオボタンの作成（複数項目から一つ選択する場合に使用します）
<input type="radio" name="（1）" value="（2）" （3）>
（1）識別名
※送信されるデータは"（1）＝（2）"の状態で送信される。
（2）送信内容
（3）デフォルトのチェック項目
※（最初にcheckされた状態でページを開く項目に"checked"を追記する。 |
サンプルソース（ラジオボタン）
<input type="radio" name="sample_ra" value="40over" checked>体重40以上<br>
<input type="radio" name="sample_ra" value="50over">体重50以上<br>
<input type="radio" name="sample_ra" value="60over">体重60以上<br> |
パスワード入力欄の作成
<input type="password" name="（1）" value="（2）" size="（3）" maxlength="（4）">
（1）識別名
※送信されるデータは"（1）＝（2）"の状態で送信される。
（2）デフォルトの表示文字
※パスワード入力欄に最初から入力された状態の文字の指定。
※実際は"*"や"●"に置換されて表示されます。
（3）横幅枠（半角英数字の文字数）
（4）最大入力文字数（半角英数字の文字数） |
サンプルソース（パスワード入力欄）
<input type="password" name="sample_pw" value="html" size="12" maxlength="10"> |
テキスト入力欄の作成
<input type="text" name="（1）" value="（2）" size="（3）" maxlength="（4）">
（1）識別名
※送信されるデータは"（1）＝（2）"の状態で送信される。
（2）デフォルトの表示文字
※テキスト入力欄に最初から入力された状態の文字の指定。
（3）横幅枠（半角英数字の文字数）
（4）最大入力文字数（半角英数字の文字数） |
サンプルソース（テキスト入力欄）
<input type="text" name="sample_te" value="html" size="12" maxlength="10"> |
ファイル選択ボタンの作成
<input type="file" name"（1）" value="（2）">
（1）識別名
※送信されるデータは"（1）＝選択したファイルのパス名"の状態で送信される。
（2）デフォルトの表示文字 |
サンプルソース（ファイル選択ボタン）
<input type="file">
※（1）、（2）は無しでも可です。 |
 サンプル表示 |
|
|
|
ページトップへ |