電子工作作業報告書管理アプリその25
HTMLでのフォーム作成編
フォーム例 <form action="confirm.php" method="post"> </form>
action""の意味は、
送信ボタンを押した後に移動するページのURLを記入する
入力内容の確認画面へ移動する事を想定した「data1confirm.html」という
ページの名前を入れる
method""の意味は
フォームの入力内容の"データの送信形式"を指定する
GETとPOSTの2種類がありpostにするのが一般的
resetでリセットボタンを表示
リセットボタンを押す事でformタグ内の内容をすべて初期状態に戻す
リセットボタン例 <form> <input type="reset" value="リセットする"> </form><input type="reset" value="リセットする">
inputのtype属性をtype="reset"としてvalue="ボタンの文字"を設定すればOKです。
placeholderで薄い文字を表示する
inputとtextareaではフォームの中にあらかじめ薄い文字を表示して
"入力のヒント"を表示出来る
薄いグレーの文字を表示例 <label for="yourname">お名前</label> <input type="text" name="yourname" placeholder="山田太郎"> <label for="comment">コメント</label> <textarea id="comment" name="comment" placeholder="ここには自由にコメントを記入してください"></textarea>
input、textareaに最初から文字を表示するにはplaceholder属性を使います。
input、textareaにそれぞれplaceholder="入力したい文字列"と追加します
textareaでテキストエリアを表示する方法と、閉じタグを書かなければいけないので注意しましょう。
テキストエリア表示例 <label for="comment">コメント</label> <textarea id="comment" name="comment"></textarea
数字入力のテキストフィールド
inputのtype属性をnumberとすることで半角数字しか入力できないテキストフィールドをつくることができます。
直接数字を入力するか、数字を増減させるボタンで入力できます。
数字入力例 <label for="num">予約番号:</label> <input id="num" type="number" name="yoyaku-num">
これらをうまく使ってフォーム画面を完成させるか