input と button いろいろ

<input type="text" name="name" maxlength="50" value="お名前" placeholder="お名前" autofocus>

※value属性 … プログラムに渡される値。枠内に表示される
※autofocus属性 … formを開いたときにそこが選択状態になる

<input type="email" name="email" maxlength="80" placeholder="your.email@example.com">

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

<input type="tel" name="tel" placeholder="03-1234-5678">

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

<input type="url" name="homeUrl" maxlength="50" placeholder="https://www.hoge.com">

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

<input type="password" name="password" maxlength="50">

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

<input type="search" name="search" placeholder="キーワードを入力">
<input type="submit" name="submit" value="検索" class="search">

<label><input type="checkbox" name="checkbox" value="contents1" checked>Contents1</label>&nbsp;&nbsp;
<label><input type="checkbox" name="checkbox" value="contents2">Contents2</label>

<label><input type="radio" name="participate" value="join" checked>参加</label>&nbsp;&nbsp;
<label><input type="radio" name="participate" value="notjoin">不参加</label>

<input type="file" name="file">

inputタグでは初期値を設定することはできない
accept属性 で選択可能なファイルのタイプを指定できる
例：accept="image/png,image/jpg,image/jpeg,image/gif"（通常はプログラムの方で指定する）

スマホのカメラに対応
（iPhoneのみ確認）

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

buttonタグ

フォームの送信やリセットに使え、デザインも自由。リンクも貼れる。

Submit Reset

<button class="button1" type="submit" name="action" value="submit">Submit</button>
<button class="button2" type="reset" name="action" value="reset">Reset</button>
//buttonタグにリンク
<button onclick="loction.href='#'"><img src="/path/to/images/yoko.png" alt=""></button>

aタグ

フォームの送信やリセットには使えない

<a class="button1" href="#">○○はこちら</a>
<a class="button2" href="#">△△はこちら</a>

inputタグ

疑似要素が効かないなどデザイン的に少々不自由…

<input class="button1" type="submit" name="submit" value="Submit"> 
<input class="button2" type="reset" name="reset" value="Reset"> 
//inputタグにリンク
<input type="button" onclick="location.href='#'" value="Button">

<input type="hidden" name="hidden" value="サーバ送信値">

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

<input type="image" name="image" src="path/to/image.png" alt="1だよ！">

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

<input type="number" name="number" min="0" max="10" step="2">

<input type="number" name="number" pattern="[1-9][0-9]*">

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

step 属性で昇降の数値の刻み数を指定できる。

<input type="range" name="range" min="-100" max="100" step="1" data-unit="%">

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

<input type="color" name="color" value="#990099">

色番号を取得する

<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());
    });
});

list属性なし

<label id="listFalse">list属性なし</label>
<input id="color-dialog" type="color" value="#990099"> 
選択値 ： <span id="area1"></span>

list属性あり

<label id="listTrue">list属性あり</label>
<input id="color-list" type="color" value="#990099" list="colors"> 
	<datalist id="colors">
		<option value="#ff0000"></option>
		<option value="#00ff00"></option>
		<option value="#0000ff"></option>
	</datalist>
	選択値 ： <span id="area2"></span>

カレンダーを表示する。

<input type="month" name="month">

<input type="week" name="week" step="2">   stepは何週毎か

<input type="date" name="date" min="2014-03-01" max="2030-12-31">

<input type="datetime-local" name="datetime-local">

<input type="time" name="time">

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

<input type="file" name="file" accept="image/png,image/jpg,image/jpeg,image/gif">

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

<input type="text" name="name" value="ここに入力できない" readonly>

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

<input type="text" name="name" value="初期表示" disabled>

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

<input type="tel" name="name" required>

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

<label>お名前: <input type="text" name="name" class="text" autofocus></label>

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

E-mail: <input type="email" name="email" list="lists" autocomplete="on">
    <datalist id="lists">
        <option value="aaa@example1.com"></option>
        <option value="bbb@example2.com"></option>
        <option value="ccc@example3.com"></option>
    </datalist>

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

E-mail:※半角英数字
<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
携帯番号: ※半角数字（ハイフン必要）
<input type="tel" name="tel" pattern="d{3}-d{4}-d{4}" placeholder="例：012-1234-1234">
携帯番号: ※半角数字（ハイフン有り無しどちらでも）
<input type="tel" name="tel" pattern="\A0[-\d]{9,12}\z" placeholder="例：012-1234-1234 or 01212341234">

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

偶数番号: <input type="number" name="number" step="2">

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

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

E-mail: <input type="email" name="email" placeholder="aaa@example.com">

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

<form id="sample-form" action="./"> //FORMの内容</form>
<input type="submit" value="送信" form="sample-form">