この記事では、formタグに action属性を指定してデータの送り先を指定する方法。input タグに labelを関連付ける方法。input type属性で様々なタイプのフォームを出力する方法を見ていきます。
入力フォームを作成したい
入力フォームの作成と送信を確認します
form要素
form要素に情報を送信する方法を書いていきます。
action 属性
action属性ではフォームの送り先を指定します。指定する際にルートディレクトリから指定する絶対パス、送信ファイルから指定する相対パスを使います。
`-- root/
|-- index/
| `-- index.html
|-- dest/
| `-- dest.html
|-- style.css
`-- script.jsindex.html ファイルのフォームから dest.html ファイルへ送信する例
相対パス
<form action="../dest/dest.html" method="GET"><form action="./../dest/dest.html" method="GET">絶対パス
<form action="/dest/dest.html" method="GET">method
フォームを送信する際にブラウザーが使用するHTTPメソッド GET を使用しています。
POST との大きな違いはGETのデータのやり取りがユーザーからURL を通して丸見えであることです。重量なデータをやり取りするにはPOST、検索などはGETが使われます。
input要素
input要素にtype属性を指定して、様々なフォームを出力させます。
type属性
<input type="text" name="text" id="text"/>input 要素の中の type 属性の値を変更して、様々なフォームを出力します。何も指定しなければ text が適用されます。
| type | 説明 | 出力フォーム |
| input | 名前や住所など短いテキストフォーム |  |
| password | パスワード 文字が伏せ字になります |  |
| 入力がメールアドレスの型なのか、検証されます |  | |
| url | 入力がurlの型なのか、検証されます |  |
| tel | モバイルブラウザーで最適化されたキーパッドが表示されます。 検証をしたい場合は、pattern=”[0-9]{3}-[0-9]{4}-[0-9]{4}”属性を指定します。 |  |
| number | 数字のみが入力可能です |  |
| date | 日付の入力フォーム |  |
| checkbox | チェックボックスにチェックを入れた場合値が送信されます |  |
| radio | ラジオボタンで、同じ nameの値を持つ複数の選択肢から一つを選択して値を送信します |  |
| file | ファイルを選択ボタンをクリックすると、ファイル選択画面が出て来ます |  |
| range | レンジバーに適した数値を指定するためのレンジバーフォーム |  |
| color | カラーコードを送信するためのフォーム |  |
長文のテキストの入力フォームは textarea 要素を使用します。
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
label要素
inputフォームにlabel属性を関連付けてフォームの説明をすることが出来ます。
<form action="/dest/dest.html" method="GET">
<div class="form-wrapper">
<label>text
<input type="text" name="text">
</label>
</div>
<div class="form-wrapper">
<label for="text">text</label>
<input type="text" name="text" id="text">
</div>
<button>Submit</button>
</form>3-5行目 label 要素で input 要素を囲う方法
9行目 label の for 属性で 関連付けたいinput 要素の id を指定するやり方があります。
送信方法
<form action="/dest.html" method="GET">
<div class="form-wrapper">
<label for="text">text</label>
<input type="text" name="text" id="text"/>
</div>
<input type="submit" value="submit">
<button>submit</button>
</form>form 要素の中に 7行目 button 要素、または8行目 input 要素に type 属性に submit を指定すると、送信ボタンになります。
form 要素の外に送信ボタンを押したい場合
<form action="/dest.html" method="GET" id="form">
<div class="form-wrapper">
<label for="text">text</label>
<input type="text" name="text" id="text"/>
</div>
</form>
<input type="submit" value="submit" form="form">
<button form="form">submit</button> 7-8行目 form 属性に 1行目 form 要素の id を指定します。
javascriptで送信
javascriptで送信させると、送信前に処理をいれることが出来ます。
送信確認
<form action="/dest.html" method="GET" onsubmit="return form_confirm()">
<div class="form-wrapper">
<label for="text">text</label>
<input type="text" name="text" id="text"/>
</div>
<input type="submit" value="submit">
</form>
<script>
function form_confirm() {
return confirm("送信しますか？")? true : false;
}
</script>form 要素に onsubmit 属性を指定します。submit イベントはフォームが送信された場合に発生します。
return true で送信、false で送信がキャンセルされます。
form外から送信
<form action="/dest.html" method="GET">
<div class="form-wrapper">
<label for="text">text</label>
<input type="text" name="text" id="text"/>
</div>
</form>
<button id="submit">submit</button>
<script>
let submit = document.getElementById("submit");
submit.addEventListener("click", function() {
document.querySelector(`form`).submit();
});
</script>form 要素に対して submit() メソッドを使って送信します。
以上form input 要素で入力フォームを出力と値を送信する方法でした。
