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