HTMLのタグパスワード入力フォーム、チェックボックスを作成する－ Esprit's Style －エンジニアの足つぼ

フォーム

〆いろいろなフォームを作成します

※JavaScript、Servlet, CGIとかと組み合わせて使うものなので、
とりあえず参考までに。。

実際の利用方法はこちらから

１．入力フィールドを作成します

　<label for="～" >,
　<input type="text(１行の入力フィールドの意味)"
　　　　　　name="入力フィールドの名前"
　　　　　　value="デフォルトの値"
　　　　　　size="幅"
　　　　　　maxlength="最大文字列"
　　　　　　id="～"></input>

<label for="tel"> 電話 </lable>
<input type="text" name="telephone"
    value="81+060-???-???" size="20" id="tel">
</input>

　入力フォーム

　File　　Edit　　Tool　　Help

電話

２．パスワード入力フォームを作成します

<label for="～" >，
<input type="password(パスワードの入力フィールド)" ～></input>

<label for="pw"> KEY </lable>
<input type="password" name="passwd"
    value="1234" size="20" id="pw">
</input>

　パスワード入力フォーム

　File　　Edit　　Tool　　Help

KEY

２．１入力フォームに文字数制限を設定します

<label for="～" >，
<input type="password" maxlengh="(フォームの入力最大値)"～></input>

// 入力フォーム 8byte まで
<label for="pw">User ID (10byte) </lable>
<input type="text" name="uid"
     value="" size="15"  maxlength="10" id="pw">
</input>

// 入力フォーム 8byte まで
<label for="pw">Pasword (8byte)</lable>
<input type="password" name="passwd"
     value="" size="15"  maxlength="8" id="pw">
</input>

　入力フォーム

　File　　Edit　　Tool　　Help

User ID (10文字)

Password (8文字)

２．２入力フォームを編集できなくします

<label for="～" >，
<input type="text" readonly></input>

XHTMLでは <input type="" readonly="readonly">となります。

// 入力フォーム 編集不可
<label for="text">値段 </lable>
<input type="text" name="uid"
     value="2,000" size="15" id="price"  readonly >
</input>

　入力フォーム

　File　　Edit　　Tool　　Help

// 編集不可フォーム
値段

３．入力エリアを作成します

<textarea name="入力フィールドの名前" rows="行数" cols="列数">


<textarea name="sendto" rows="6" cols="20">
</textarea>

　入力エリア

　File　　Edit　　Tool　　Help

３．１入力エリアのテキストの折り返しを設定します

<textarea name="" rows="行数" cols="列数" wrap="virtual/phsical">

※IE7ではwrapの設定をしなくても、横スクロールバーは出ず勝手に折り返されます。
Firefox2では、入力する文字によって横スクロールが出たり出なかったり。。
virtual は、フォーム送信の際に改行情報も送信される。
phsical は、あくまで見た目のみでフォーム送信の際は改行情報は送信されません。

//wrap="virtual"
<textarea namex="sendto" rows="6" cols="20"
    wrap="virtual"">
</textarea>

　入力エリア

　File　　Edit　　Tool　　Help

wrap="virtual"

//wrap="physical"
<textarea namex="sendto" rows="6" cols="20"
    wrap="physical"">
</textarea>

　入力エリア

　File　　Edit　　Tool　　Help

wrap="physical"

４．１ボタンを設定します

<button> ～ <button>

<button type="button">
    PUSH <br>
    <img src="icon.gif">
</button>

　Button

　File　　Edit　　Tool　　Help

４．２ボタンを設定します

<input type="button">


<input type="button" name="btn" value="Push">

　Button

　File　　Edit　　Tool　　Help

５．ラジオボタンを作ります

<label for="～" >，
<input type="radio" name="名前"
value="送信文字列" checked(あらかじめチェック状態とする)>
Netscapeだと複数選択できてしまう！？
※labelを付与することで、label文字をクリックしてもラジオボタンを
チェックしたことになります。labelは必ず付けるようにしましょう。

<input type="radio" name="rank"
    value="best" id="r1">
  <label for="r1"> 甲 </label>
<input type="radio" name="rank"
    value="good" id="r2">
  <label for="r2"> 乙 </label>
<input type="radio" name="rank"
    value="bad" id="r3">
  <label for="r3"> 丙 </label>
<input type="radio" name="rank"
    value="worst" id="r4">
  <label for="r4"> 呈 </label>

　ラジオボタン

　File　　Edit　　Tool　　Help

甲乙
丙呈

６．チェックボックスを作ります

<label for="～" >，
<input type="checkbox" name="名前"
value="送信文字列" checked(あらかじめチェック状態とする)>
※labelを付与することで、label文字をクリックしてもチェックボックスを
チェックしたことになります。labelは必ず付けるようにしましょう。

<input type="checkbox" name="rank"
    value="best" id="r1">
  <label for="r1"> 甲 </label>
<input type="checkbox" name="rank"
    value="good" id="r2" checked>

  <label for="r2"> 乙 </label>
<input type="checkbox" name="rank"
    value="bad" id="r3">
  <label for="r3"> 丙 </label>
<input type="checkbox" name="rank"
    value="worst" id="r4">
  <label for="r4"> 呈 </label>

　チェックボックス

　File　　Edit　　Tool　　Help

甲乙丙呈

６．メニューを作ります

<select name="～" >，
<option value="送信文字列" selected(あらかじめ選択状態とする)>

XHTMLでは <option value="" selected="selected">となります。

<select name="武器">
  <option selected> ライフル </option>
  <option> 対戦車ロケット砲弾 </option>
  <option> プラスティック爆弾 </option>
  <option> 戦車 </option>
</select>

　メニュー

　File　　Edit　　Tool　　Help

　好きな武器は？
　

７．メニューをグループ化します

<optgroup label="～" >

<select name="子会社・親会社">
  <optgroup label="イトウヨーカドー">
    <option> セブンイレブン </option>
    <option> デニーズ </option>
  </optgroup>
  <optgroup label="三菱商事">
    <option> ファミリーマート </option>
    <option>  </option>
  </optgroup>
  <optgroup label="伊藤忠商事">
    <option> ローソン </option>
  </optgroup>
</select>

　メニューのグループ化

　File　　Edit　　Tool　　Help

　好きな本は？

８．リストボックスを作ります

<select size="行数" name="～" multiple(複数選択を可能にする)>
<option value="送信文字列" selected(あらかじめ選択状態とする)>


<select size="3" name="バイク">
  <option> KAWASAKI </option>
  <option> HONDA </option>
  <option> YAMAHA </option>
</select>

　リストボックス

　File　　Edit　　Tool　　Help

　好きな音楽は？

９．ファイル選択ボタンを作ります

<input type="file" name="～" accept="MIMEタイプ">


<input type="file" name="inputfile">
<input type="submit" name="OK">

　ファイル選択

　File　　Edit　　Tool　　Help

　ファイルを選択
　

　

１０．メール送信フォームを作ります

<form action="mailto:???@??.ne.jp"
method="post" enctype="MIMEタイプ"> ～ </form>

<form action="mailto:???@???.com"
    method="post" enctype="text/plain">
  <label for="name"> NAME <label>
  <input type="text" name="name" id="name">
  <label for="mail"> MAIL <label>
  <input type="text" name="email" id="mail">
  
    本文
  <textarea name="date" rows="5" cols="20">
  </textarea>
</form>

<input type="submit" value="送信">
<input type="reset" value="クリア">

　メール送信フォーム

　File　　Edit　　Tool　　Help

１１．フォーム内でのtab動作を制御します

<form type="text" tabindex="1">

<input type="text"
    name="氏名" tabindex="1">
<select name="年齢" tabindex="5">
<select name="職業" tabindex="4">
<input type="text"
    name="電話番号" tabindex="3">
<input type="text"
    name="Eメール" tabindex="2">

　Tab Setting

　File　　Edit　　Tool　　Help

氏名（必須）
年齢
職業

電話番号（必須）
Eメール（必須）

１２．フォーム内での入力モード設定 (CSSを用いる設定)　※IE独自タグ

<form type="text" tabindex="1">
<form type="text" style="ime-mode:IMEの設定"
(自動切換え)　　　　　　　"ime-mode:auto"
(日本語入力モード)　　　　"ime-mode:active"
(英語入力モード)　　　　　"ime-mode:inactive"
(日本語入力不可)　　　　　"ime-mode:disabled">


<form action="???">
<input type="text" style="ime-mode:auto">
<input type="text" style="ime-mode:active">
<input type="text" style="ime-mode:inactive">
<input type="text" style="ime-mode:disabled">
</form>

　IME Setting

　File　　Edit　　Tool　　Help

１３．入力項目をグループ化し、グループごとに枠をつけます

<fieldset><legend> ... </legend></fieldset>

<fieldset>
  <legend>入力項目</legend>
  <label>氏名（必須）
    <input type="text" name="氏名" />
  </label>
  <label>年齢
    <select name="年齢">
       <option selected="selected">10代</option>
       <option>20代</option>
       <option>30代</option>
       <option>40代</option>
       <option>50代</option>
       <option>60代以上</option>
    </select>
  </label>
  <label>職業
    <select name="職業">
      <option selected="selected">会社員</option>
      <option>自営業</option>
      <option>公務員</option>
    </select>
  </label>
</fieldset>

　Fieldset

　File　　Edit　　Tool　　Help

入力項目氏名（必須）
年齢
職業

１４．Googleサイト内検索を追加する

<!-- SiteSearch Google -->
<form method=get action="http://www.google.co.jp/search">
<a href="http://www.google.co.jp/">
<img src="../img/Logo_25wht.gif" border="0" alt="Google" align="absmiddle">
<input type=text name=q size=20 maxlength=255 value="" />
<input type=hidden name=ie value=UTF-8 />
<input type=hidden name=oe value=UTF-8 />
<input type=hidden name=hl value="ja" />
<input type=hidden name=lr value="lang_ja" />
<input type=hidden name=num value="20" />
<input type=submit name=btnG value="検索" />
<input type=hidden name=domains value="http://es.rojo.jp/" />
<input type=hidden name=sitesearch value="http://es.rojo.jp/" />
</form>
<!-- SiteSearch Google -->

　Google Search

　File　　Edit　　Tool　　Help

Prev Page Next Page

Page Top

Esprit's Style

－ エンジニアの足つぼ －

フォーム

〆 いろいろなフォームを作成します

※JavaScript、Servlet, CGIとかと組み合わせて使うものなので、 とりあえず参考までに。。

１．入力フィールドを作成します

<label for="～" >, <input type="text(１行の入力フィールドの意味)" name="入力フィールドの名前" value="デフォルトの値" size="幅" maxlength="最大文字列" id="～"></input>

２．パスワード入力フォームを作成します

<label for="～" >， <input type="password(パスワードの入力フィールド)" ～></input>

２．１ 入力フォームに文字数制限を設定します

<label for="～" >， <input type="password" maxlengh="(フォームの入力最大値)"～></input>

２．２ 入力フォームを編集できなくします

<label for="～" >， <input type="text" readonly></input>

３．入力エリアを作成します

<textarea name="入力フィールドの名前" rows="行数" cols="列数">

３．１ 入力エリアのテキストの折り返しを設定します

<textarea name="" rows="行数" cols="列数" wrap="virtual/phsical">

４．１ ボタンを設定します

<button> ～ <button>

４．２ ボタンを設定します

<input type="button">

５．ラジオボタンを作ります

６．チェックボックスを作ります

６．メニューを作ります

<select name="～" >， <option value="送信文字列" selected(あらかじめ選択状態とする)>

７．メニューをグループ化します

<optgroup label="～" >

８．リストボックスを作ります

<select size="行数" name="～" multiple(複数選択を可能にする)> <option value="送信文字列" selected(あらかじめ選択状態とする)>

９．ファイル選択ボタンを作ります

<input type="file" name="～" accept="MIMEタイプ">

１０．メール送信フォームを作ります

<form action="mailto:???@??.ne.jp" method="post" enctype="MIMEタイプ"> ～ </form>

１１．フォーム内でのtab動作を制御します

<form type="text" tabindex="1">

１２．フォーム内での入力モード設定 (CSSを用いる設定) ※IE独自タグ

<form type="text" tabindex="1"> <form type="text" style="ime-mode:IMEの設定" (自動切換え) "ime-mode:auto" (日本語入力モード) "ime-mode:active" (英語入力モード) "ime-mode:inactive" (日本語入力不可) "ime-mode:disabled">

１３．入力項目をグループ化し、グループごとに枠をつけます

<fieldset><legend> ... </legend></fieldset>

１４．Googleサイト内検索を追加する

－エンジニアの足つぼ－

〆いろいろなフォームを作成します

※JavaScript、Servlet, CGIとかと組み合わせて使うものなので、
とりあえず参考までに。。

<label for="～" >，
<input type="password(パスワードの入力フィールド)" ～></input>

２．１入力フォームに文字数制限を設定します

<label for="～" >，
<input type="password" maxlengh="(フォームの入力最大値)"～></input>

２．２入力フォームを編集できなくします

<label for="～" >，
<input type="text" readonly></input>

３．１入力エリアのテキストの折り返しを設定します

４．１ボタンを設定します

４．２ボタンを設定します

<select name="～" >，
<option value="送信文字列" selected(あらかじめ選択状態とする)>

<select size="行数" name="～" multiple(複数選択を可能にする)>
<option value="送信文字列" selected(あらかじめ選択状態とする)>

<form action="mailto:???@??.ne.jp"
method="post" enctype="MIMEタイプ"> ～ </form>

１２．フォーム内での入力モード設定 (CSSを用いる設定)　※IE独自タグ