2014-12-07
2014-12-07
フォームの各部品
お問い合せフォーム
- 各部品の確認
テキスト入力
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>お問い合わせ</title> </head> <body> <h1>お問い合わせフォーム</h1> <formaction="#"method="post"> <p>名前:<inputtype="text"name="name"size="20"maxlength="10"value="お名前"></p> <p>内容:<textareaname="subject"rows="5"cols="40">お問い合せ内容</textarea></p> <p><inputtype="submit"value="送信"></p> </form> </body> </html>
チェックボックス
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>チェックボックス</title> </head> <body> <h1>チェックボックス</h1> <formaction="#"method="post"> <p>スマートフォン: <label><inputtype="checkbox"name="mobile"value="1"checked>iPhone</label> <label><inputtype="checkbox"name="mobile"value="2">Android</label> <label><inputtype="checkbox"name="mobile"value="3">その他</label> </p> <p><inputtype="submit"value="送信"></p> </form> </body> </html>
ラジオボタン
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>ラジオボタン</title> </head> <body> <h1>ラジオボタン</h1> <formaction="#"method="post"> <p>性別: <label><inputtype="radio"name="sex"value="male"checked>男性</label> <label><inputtype="radio"name="sex"value="female">女性</label> </p> <p><inputtype="submit"value="送信"></p> </form> </body> </html>
リスト
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>リスト</title> </head> <body> <h1>リスト</h1> <formaction="#"method="post"> <p>言語: <selectname="language"> <optionvalue=""selected>以下の言語を選択してください</option> <optionvalue="1">日本語</option> <optionvalue="2">英語</option> <optionvalue="3">フランス語</option> <optionvalue="4">スペイン語</option> <optionvalue="5">韓国語</option> </select> </p> <p><inputtype="submit"value="送信"></p> </form> </body> </html>
ラベルを付ける
- ラジオボタンでは、選択する文字のみにラベルを付けても機能します
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>ラベルを付ける</title> </head> <body> <h1>ラベルを付ける</h1> <formaction="#"method="post"> <p>スマートフォン: <label><inputtype="checkbox"name="mobile"value="1"checked>iPhone</label> <label><inputtype="checkbox"name="mobile"value="1">Android</label> <label><inputtype="checkbox"name="mobile"value="1">その他</label> </p> <p>性別: <inputtype="radio"name="sex"value="male"id="male"checked><labelfor="male">男性</label> <inputtype="radio"name="sex"value="female"id="female"><labelfor="female">女性</label> </p> <p><inputtype="submit"value="送信"></p> </form> </body> </html>
パスワード
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>パスワード</title> </head> <body> <h1>パスワード入力</h1> <formaction="#"method="post"> <p>パスワード:<inputtype="password"name="password"size="10"maxlength="5"></p> <p><inputtype="submit"value="送信"></p> </form> </body> </html>
ファイルをアップロード
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>ファイルをアップロード</title> </head> <body> <h1>写真をアップロード</h1> <formaction="#"method="post"enctype="multipart/form-data"> <p>写真: <inputtype="file"name="picture"> </p> <p><inputtype="submit"value="送信"></p> </form> </body> </html>
隠しデータの送信
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>隠しデータの送信</title> </head> <body> <h1>隠しデータの送信</h1> <formaction="#"method="post"> <p><inputtype="hidden"name="user_id"value="012345"></p> <p><inputtype="submit"value="送信"></p> </form> </body> </html>
基本形(1)
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>フォームの練習(1)</title> <style> #myform label { font-size: 0.875em; margin-bottom: 3px; display: block; } </style> </head> <body> <formaction="#"method="post"id="myform"> <p> <labelfor="user" >名前</label> <inputtype="text"id="user"name="username"> </p> <p> <labelfor="mail" >メールアドレス</label> <inputtype="text"id="mail"name="mailaddress"> </p> <p> <labelfor="com" >コメント</label> <textareaid="com"name="comment"cols="40"rows="8"></textarea> </p> <p><inputtype="submit"value="送信"id="submit"></p> </form> </body> </html>
基本形(2)
<!DOCRTPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>フォームの練習(2)</title> <style> #myform label { font-size: 0.875em; width: 100px; display: block; float: left; } </style> </head> <body> <formaction="#"method="post"id="myform"> <p> <labelfor="user" >名前</label> <inputtype="text"id="user"name="username"> </p> <p> <labelfor="mail" >メールアドレス</label> <inputtype="text"id="mail"name="mailaddress"> </p> <p> <labelfor="com" >コメント</label> <textareaid="com"name="comment"cols="40"rows="8"></textarea> </p> <p><inputtype="submit"value="送信"id="submit"></p> </form> </body> </html>
table
- 表示の崩れがなくなる
- 色が付けやすくなる
<!DOCRTPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>テーブルで組むフォーム</title> <style> #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> <formaction="#"method="post"id="myform"> <table> <tr> <th><labelfor="user" >名前</label></th> <td><inputtype="text"id="user"name="username"></td> </tr> <tr> <th><labelfor="mail" >メールアドレス</label></th> <td><inputtype="text"id="mail"name="mailaddress"></td> </tr> <tr> <th><labelfor="com" >コメント</label></th> <td><textareaid="com"name="comment"cols="38"rows="8"></textarea></td> </tr> </table> <p><inputtype="submit"value="送信"id="submit"></p> </form> </body> </html>
focus
- 「:focus」を使った擬似クラスの設定
#user:hover, #mail:hover, #com:hover { background-color: #FFFEE8; } #user:focus, #mail:focus, #com:focus { background-color: #EBFEFB; }
- 実際には、ブラウザの初期値が使用しやすいので設定しません
検索フォーム
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>検索フィールド</title> <style> #search #text { width: 150px; padding: 4px 10px; border-radius: 6px; } #search #submit { font-size: 18px; width: 50px; margin-left: 2px; vertical-align: middle; cursor: pointer; } </style> </head> <body> <formaction="#"method="get"id="search"> <p> <inputtype="text"id="text"name="keyword"> <inputtype="submit"id="submit"value="検索"> </p> </form> </body> </html>