HTML フォームのチップス

投稿日 2015/01/17

[Home] [Index] 

コントロールの無効化や非表示を行うには

フォームのコントロール (input など) を無効化するには disabled 属性を使います。

<input type="button" name="button1" disabled />

フォームのコントロール (input など) を非表示にするには スタイルで display: none を設定します。場所はそのまま残して表示だけしない場合は、visibility: hidden (表示は visible) を設定します。


フォーム内のコントロールの位置を揃えるには


SELECT コントロールの幅と高さを設定するには

横幅は スタイルで width を設定します。高さ (同時に表示できる行数) は size 属性で設定します。

<select style="width:100px" size="4" >
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</select>

表示例


SELECT コントロールで選択項目が変化したときのイベントハンドラを定義するには


SELECT コントロールで選択項目が変化したときのイベントハンドラを定義するには

TEXTAREA コントロールの幅と高さを設定するには

textarea コントロールの幅と高さは、cols と rows 属性で設定します。これらの単位は「文字」です。

<textarea id="textarea1" cols="40" rows="4">
</textarea>

表示例


コントロールにタブインデックスを設定するには


テキストボックスの内容を検証するには

通常は、送信ボタンなどがクリックされたときのイベントハンドラを JavaScript で定義してその中で検証を行います。あるいはサーバ側で検証することもできます。HTML5 では数値入力専用や日付入力専用のコントールを利用することもできます。

数値入力 

HTML

<form id="form1">
 <fieldset>
  <legend>数値入力</legend>
  <input type="text" id="text1" name="text1" />
  <input type="submit" value="submit" />
 </fieldset>
</form>

JavaScript

$(document).ready(function() {
  $("#form1").submit(function() {
    var re = new RegExp("^\\d+$");
    var text1 = $("#text1").val();
    if (re.test(text1) == false) {
      alert("入力が数値ではありません。");
      return false;  // 送信取消
    }
    else {
      alert("送信しました。");
      return true;
    }
  });
});

ファイルをアップロードできるようにするには

ファイルをアップロードするには、フォームに enctype="multipart/form-data" と method="post" を指定します。また、input の type 属性に "file" を指定します。

<form id="form1" method="post" enctype="multipart/form-data">
<input type="file" name="file1" />
<input type="submit" value="submit" />
</form>

フォームの内容をJavaScriptで送信するには

フォームの内容をチェックしてからOKだったらメソッドを使って送信するには submit() メソッドを使います。

submit() メソッドのテスト

HTML

<form id="form2">
  <fieldset>
     <legend>submit() メソッドのテスト</legend>
     <input type="text" name="text2" id="text2">
     <input type="button" id="btnSend" value=" Send ">
  </fieldset>
</form>

JavaScript

$(document).ready(function() {
  $("#btnSend").click(function() {
    var text2 = $("#text2").val();
    if (text2 == "") {
      alert("データが空です。");
    }
    else {
      $("#form2").submit();
    }
  });
});

コントロールをアクティブ (フォーカスを当てる) にするには


ラジオボタンをグループ化するには

ラジオボタンをグループ化するには name 属性を同じ名前にします。さらに fieldset と legend タグを使うとグループボックス風の外観を作ることができます。

グループ RadioButton1
RadioButton2

ラジオボタンやチェックボックスのチェックをオンにするには

ラジオボタンなどで checked 属性を付けるとチェックをオンにできます。

 check1

<input type="checkbox" id="check1" checked>

動的にチェックをオンするには、JavaScript を使用します。

$("#check1").attr("checked", true);

ラジオボタンやチェックボックスのラベルクリックを有効にするには

ラジオボタンやチェックボックスは通常は本体だけをクリックしたとき動作しますが、label タグを使うと文字列をクリックしたときも動作させることができます。

<input type="checkbox" id="check2">
<label for="check2"> check2</label>

ラジオボタンやチェックボックスで状態が変化したときのイベントハンドラを定義するには


 

 


 このページの先頭  [Home]

 開設 2014年12月   著作権 2014-2015 bonk.red  連絡先: TEL 111-222-3333 MAIL sales@xxxxx.jp