Form - input と button いろいろ

Inputタグの種類 | Inputタグの属性


<form action="mailto:your.email@example.com?subject=送信時のメールタイトル" method="post" enctype="text/plain">
	//action="mailto:〜はテスト用で、実際はPHPなどのフォームプログラムに送る。
	//FORMの内容
</form>

Inputタグの種類

text
email
tel

iOS版のSafariではフォーカスが当たると、電話番号を入力するためのキーボードを表示

url

http:// などで始まらない文字を入力するとバリデーションエラーとなる

password

value属性は書くと伏字で表示になるので書かない

search

検索キーワードの入力用。iOSではフォーカス時のキーボード表示が変化。
formタグ内で検索プログラムにリンクさせる。

checkbox
  
radio
  
file

初期値を設定することはできない
accept属性 で選択可能なファイルのタイプを指定できる（通常はプログラムの方で指定する）

button

buttonタグ

  • nameはプログラムが参照する名前
  • valueはプログラムに渡される値
  • disabled はボタンを使用不可にする属性
  • リセットボタンは付けないことが多い。

inputタグ

hidden
image

GETの時、画像ボタンをクリックすると座標がファイル名.x=n ファイル名.y=n という形式でactionに送信される。POSTなら送信されないが、サーバによってはエラーがかかる

number

数値の入力用。数値以外は入力できない。
マウスオーバーで現れる▲▼クリックで数字の上げ下げが出来る。正規表現

// 2ずつ増減する // 整数以外はエラーがかかる
range

数値をスライダーで入力できる。初期値はminとmaxの中間

color

カラーピッカーを使って色を選択できる

色番号を取得する


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


    $(function(){
        $("#color-dialog").on("change", function(){  //色選択時の処理
            //選択した色の値は val メソッドで取得
            $('#listFalse').css("color", $('#color-dialog').val())	
            $('#area1').text($('#color-dialog').val());
        });

        $("#color-list").on("change", function(){
            $('#listTrue').css("color", $('#color-list').val())
            $('#area2').text($('#color-list').val());
        });
    });
選択値 ：
選択値 ：
日付

カレンダーを表示する。

month: week: date: datetime-local: //タイムゾーンなし。ローカルのタイムゾーンに従う。UTCによらないローカル日時 カレンダーが表示される
time:

Inputタグの属性

accept属性

サーバが受付可能なMIMEタイプを指定

readonly属性

テキストフィールドの入力ができなくなる。（value属性は送信される）
text, password, search, tel, url, email, date, time, number

disabled属性

入力も選択もできなくなる。（value属性は送信されない）
記述可能なタイプ： text, password, file, checkbox, radio, submit, reset, button, image, search, tel, url, email, date, time, number, range, color

required属性

項目内に値がない場合にエラー表示される
記述可能なタイプ： text, password, file, checkbox, radio, search, tel, url, email, date, time, number
※Return/Enterするたびに、ここがエラー表示になってしまうのでこのサンプルでは未設定。

autofocus属性

ページがロードされたタイミングで自動的にフォーカスがあたる
記述可能なタイプ： text, password, file, checkbox, radio, submit, reset, button, image, search, tel, url, email, date, time, number, range, color
※リロードするたびに、ここがフォーカスされてしまうと不都合なのでこのサンプルでは未設定。

autocomplete属性

事前にセットしておいた値をリスト形式で表示することができる
記述可能なタイプ： text, search, tel, url, email, date, time, number, range, color

E-mail:
pattern属性

入力値に正規表現を使って制限をかけることができる。
記述可能なタイプ： text, password, search, tel, url, email
フォーマットで指定したパターンと一致しなかった場合はエラー表示

E-mail:※半角英数字

携帯番号: ※半角数字
step属性

datetimeタイプやnumberタイプのような日付・数字の値を指定する
記述可能なタイプ： datetime, date, month, week, time, datetime-local, number, range

偶数番号:
placeholder属性

記入例や注意書きなど、あらかじめフィールドに入れておける。IE以外対応
記述可能なタイプ： text, password, search, tel, url, email, number
valueと違って単なる入力見本で、サーバに送信されない。value属性があったら表示はvalueが優先。

CSSで装飾する時 … ::placeholder { ここにCSS }

E-mail:
form属性

form要素のid名を指定することでform要素の外にマークアップすることができる

オマケ

javaScriptと併用で
計算もできる
+ =    

<input type="number" id="num1" placeholder="数値1"> +
<input type="number" id="num2" placeholder="数値2"> =
<!-- for属性を用いて、num1とnum2から生成された値であることを明示 -->
<output for="num1 num2" id="result">           </output>&nbsp;&nbsp;
<!-- output要素のvalueプロパティに値を指定すると、出力値を書き換えることができる -->
<button onclick="document.getElementById('result').value =
		 parseInt(document.getElementById('num1').value, 10) +
		parseInt(document.getElementById('num2').value, 10)">
		計算
		</button>

TOP