どうやって作成するか:スタックフォーム
- 前のページ ニュースサブスクリプション
- 次のページ レスポンシブフォーム
CSSを使ってスタックフォームを作成する方法を学びます。
スタックフォーム
垂直に並んだフォーム(入力フィールドとラベルが上下に配置され、水平に配置されない):
どうやってスタックフォームを作成するか
第1ステップ - HTMLを追加:
フォーム要素を使用して入力を処理します。私たちの PHPトレーニング もっと詳しくはこちらから。
各フィールドに入力コントロール(対応するラベル)を追加します:
<form action="/action_page.php"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <label for="country">Country</label> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> </select> <input type="submit" value="Submit"> </form>
第2步 - CSSを追加:
/* 入力フィールドのスタイルを設定 */ input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } /* 提交ボタンのスタイルを設定 */ input[type=submit] { width: 100%; background-color: #04AA6D; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } /* マウスオーバー時の提交ボタンの背景色を追加 */ input[type=submit]:hover { background-color: #45a049; }
関連ページ
チュートリアル:HTMLフォーム
チュートリアル:CSSフォーム
- 前のページ ニュースサブスクリプション
- 次のページ レスポンシブフォーム