ドットインストール HTML入門10～11

Formの基礎１

フォームを活用する基礎。

テキストボックス形式のものを扱う。

<form>

入力・送信用のフォームの塊を作る、actionとmethodの属性が必須。

form内部の様々なオブジェクトに入力された情報をサーバーに送信する機能を持つ。

action属性は値には情報の送信先となるサーバーを指定する。

method属性は値にgetもしくはpostどちらかの送信方法を選ぶ。

getは情報をURLとして送信する方法で小さな情報を扱う形式。

postはデータ本体を送信する方法でより大きな情報を扱う形式。

これより<form>タグ内で扱えるフォームのパーツとなるタグを示す。

<form action="survey.php" method="post">
    <p>名前:<input type="text" name="name" size="60" maxlength="5"></p>
    <p>メモ:<textarea type="text" name="memo"></textarea></p>
    <p><input type="submit" value="送信！"></p>
</form>

<input type="submit">

フォームの情報を送信する送信ボタンを作る。

これから示すタグは全てname属性とvalue属性を持つがこの２つの値をセットとした情報を送信することとなる。

この送信ボタンの持つvalueの値はボタンにテキストとして表示される。

<form action="survey.php" method="post">
    <p>名前:<input type="text" name="name" size="60" maxlength="5" required></p>
    <p>パスワード:<input type="password" name="password"></p>
    <p><input type="hidden" name="user_id" value="32"></p>
    <p>日付:<input type="date" name="birthday"></p>
    <p>URL:<input type="url" name="url"></p>
    <p>email:<input type="email" name="email"></p>
    <p><input type="submit" value="送信！"></p>
</form>

<input type="text">

<input>タグの最も基本的なテキストボックス。

以下全てのタグに共通するがsize属性の値に最大表示文字数を、maxlength属性の値に最大入力文字数を指定することができる。

またrequired属性を入れることで入力必須の項目となる。

テキストボックス内の文字列がvalueの値となりname属性の値と共に送信される

<input type="password">

パスワード入力用テキストボックス。

入力した内容が秘匿表示される。

<input type="url">

URL入力用のテキストボックス。

URLの形式をとっているかどうかのチェックが自動的に行われる。

<input type="email">

メールアドレス入力用のテキストボックス。

簡易にだがメールアドレス形式をとっているかどうかのチェックが自動的に行われる。

<input type="hidden">

ユーザーからの入力を必要としないが送信したい情報がある時に用いる。

形式上テキストボックスと同様の型を持っている。

 

<textarea>

複数行に渡る入力欄を作りたい時に用いる。

cols属性の値に一行の文字数、rows属性の値に行数を指定する。

また最大文字数をmaxlength属性の値に指定することもできる。

 

<input type="date">

日付入力欄を作る。

他のオブジェクトと異なりsize属性やmaxlength属性は存在しない。