フォームの基本構造
フォームとは
- ブラウザの操作画面で、利用者からの入力を受け付ける要素(の集合)のこと
- 目的は、利用者からの情報収集のため
お問い合せフォーム
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ</title> </head> <body> <h1>お問い合わせフォーム</h1> <form action="#" method="post"> <p>名前:<input type="text" name="name" size="20" maxlength="10" value="お名前"></p> <p>内容:<textarea name="subject" rows="5" cols="40">お問い合せ内容</textarea></p> <p><input type="submit" value="送信"></p> </form> </body> </html>
チェックボックス
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>チェックボックス</title> </head> <body> <h1>チェックボックス</h1> <form action="#" method="post"> <p>スマートフォン: <input type="checkbox" name="mobile" value="1" checked>iPhone <input type="checkbox" name="mobile" value="2">Android <input type="checkbox" name="mobile" value="3">その他 </p> <p><input type="submit" value="送信"></p> </form> </body> </html>
ラジオボタン
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ラジオボタン</title> </head> <body> <h1>ラジオボタン</h1> <form action="#" method="post"> <p>性別: <input type="radio" name="sex" value="male" checked>男性 <input type="radio" name="sex" value="female">女性 </p> <p><input type="submit" value="送信"></p> </form> </body> </html>
リスト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>リスト</title> </head> <body> <h1>リスト</h1> <form action="#" method="post"> <p>言語: <select name="language"> <option value="" selected>以下の言語を選択してください</option> <option value="1">日本語</option> <option value="2">英語</option> <option value="3">フランス語</option> <option value="4">スペイン語</option> <option value="5">韓国語</option> </select> </p> <p><input type="submit" value="送信"></p> </form> </body> </html>
ラベルを付ける
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ラベルを付ける</title> </head> <body> <h1>ラベルを付ける</h1> <form action="#" method="post"> <p>スマートフォン: <label><input type="checkbox" name="mobile" value="1" checked>iPhone</label> <label><input type="checkbox" name="mobile" value="1">Android</label> <label><input type="checkbox" name="mobile" value="1">その他</label> </p> <p>性別: <input type="radio" name="sex" value="male" id="male" checked><label for="male">男性</label> <input type="radio" name="sex" value="female" id="female"><label for="female">女性</label> </p> <p><input type="submit" value="送信"></p> </form> </body> </html>
パスワード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>パスワード</title> </head> <body> <h1>パスワード入力</h1> <form action="#" method="post"> <p>パスワード:<input type="password" name="password" size="10" maxlength="5"></p> <p><input type="submit" value="送信"></p> </form> </body> </html>
ファイルをアップロード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ファイルをアップロード</title> </head> <body> <h1>写真をアップロード</h1> <form action="#" method="post" enctype="multipart/form-data"> <p>写真: <input type="file" name="picture"> </p> <p><input type="submit" value="送信"></p> </form> </body> </html>
隠しデータの送信
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>隠しデータの送信</title> </head> <body> <h1>隠しデータの送信</h1> <form action="#" method="post"> <p><input type="hidden" name="user_id" value="012345"></p> <p><input type="submit" value="送信"></p> </form> </body> </html>
基本形(1)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの練習(1)</title> <style type="text/css"> <!-- #myform label { font-size: 0.875em; margin-bottom: 3px; display: block; } --> </style> </head> <body> <form action="#" method="post" id="myform"> <p> <label for="user" >名前</label> <input type="text" id="user" name="username"> </p> <p> <label for="mail" >メールアドレス</label> <input type="text" id="mail" name="mailaddress"> </p> <p> <label for="com" >コメント</label> <textarea id="com" name="comment" cols="40" rows="8"></textarea> </p> <p><input type="submit" value="送信" id="submit"></p> </form> </body> </html>
基本形(2)
<!DOCRTPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの練習(2)</title> <style type="text/css"> <!-- #myform label { font-size: 0.875em; width: 100px; display: block; float: left; } --> </style> </head> <body> <form action="#" method="post" id="myform"> <p> <label for="user" >名前</label> <input type="text" id="user" name="username"> </p> <p> <label for="mail" >メールアドレス</label> <input type="text" id="mail" name="mailaddress"> </p> <p> <label for="com" >コメント</label> <textarea id="com" name="comment" cols="40" rows="8"></textarea> </p> <p><input type="submit" value="送信" id="submit"></p> </form> </body> </html>
table
- 表示の崩れがなくなる
- 色が付けやすくなる
<!DOCRTPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テーブルで組むフォーム</title> <style type="text/css"> <!-- #myform { font-size: 0.875em; width: 500px; } #myform label { font-size: 0.875em; } #myform table { width: 100%; border-collapse: collapse; } #myform th { text-align: left; width: 100px; padding: 8px; background-color: #DFF5B8; border: solid 1px #AAA; } #myform td { padding: 8px; border: solid 1px #AAA; } #myform p { text-align:center; } --> </style> </head> <body> <form action="#" method="post" id="myform"> <table> <tr> <th><label for="user" >名前</label></th> <td><input type="text" id="user" name="username"></td> </tr> <tr> <th><label for="mail" >メールアドレス</label></th> <td><input type="text" id="mail" name="mailaddress"></td> </tr> <tr> <th><label for="com" >コメント</label></th> <td><textarea id="com" name="comment" cols="38" rows="8"></textarea></td> </tr> </table> <p><input type="submit" value="送信" id="submit"></p> </form> </body> </html>
検索フォーム
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>SAMPLE</title> <style type="text/css"> <!-- #search p { margin: 0; } #search #text { font-size: 14px; line-height: 1; width: 150px; padding: 4px 10px; background: none; background-image: url(textbox.png); background-repeat: no-repeat; border: none; outline: none; } #search #submit { font-size: 14px; line-height: 1; width: 50px; margin-left: 4px; padding: 4px 0; background: none; background-image: url(button.png); background-repeat: no-repeat; vertical-align:top; border: none; outline: none; cursor: pointer; } #search #submit:hover { background-position: 0 -32px; } --> </style> </head> <body> <form action="#" method="get" id="search"> <p> <input type="text" id="text" name="keyword"><input type="submit" id="submit" value="検索"> </p> </form> </body> </html>