ryotankの備考録日記

趣味の電子工作についての備考録などなど

電子工作作業報告書管理アプリその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">

これらをうまく使ってフォーム画面を完成させるか