カテゴリー:
HTML5
閲覧数:535 配信日:2015-05-13 00:53
フォーム横並び最小構成
単純なフォームであればこれでOK
但し、Chosenのように動的生成するタイプでは不可だった
<style>body { font-size: 125%; color: #333; background-color: #2196F3;}fieldset { width: 90%; margin: 20px; border: 0 none;}legend { font-size: 1.2em; width: 100%; border-bottom: 1px dotted #99c;}fieldset div { margin: 4px 0;}input, textarea, select { font-size: 1em; padding: 2px 5px 4px; border: 0 none; border-radius: 2px;}/* flexbox styles */fieldset div { display: flex; align-items: center;}label { order: 1; text-align: right; padding-right: 0.5em; white-space: nowrap; user-select: none; cursor: pointer; width: 10em; /* 項目の長さに応じて変更する */}input, textarea, select { order: 2; flex: 1 1 auto;}/* label state styles */input:focus ~ label, textarea:focus ~ label, select:focus ~ label { color: #933;}input:checked ~ label { font-weight: bold;}</style><form action="/" method="post"> <fieldset> <legend>投稿内容</legend> <div> <input id="name" name="name" type="text"> <label for="name">name</label> </div>
<div> <select id="experience" name="experience"> <option value="1">1 year or less</option> <option value="2">2 years</option> <option value="3">3 - 4 years</option> <option value="5">5 years or more</option> </select> <label for="experience">experience</label> </div> </fieldset></form> |
・フォームの横並びレイアウトはCSSのFlexboxでラクに実装しよう
別案1
<style>ul li { display: flex; flex-wrap: wrap; align-items: center;} ul span:first-of-type { flex-basis: 120px; } ul span:nth-of-type(2) { flex-basis: 210px; flex-grow: 1; }ul input[type="text"], ul textarea { width: 100%; box-sizing: border-box;}</style><ul style="width:○○px"><li><span>お名前</span><span><input type="text" name="name" size="20"></span></li><li><span>電話番号</span><span><input type="text" name="tel" size="20"></span></li><li><span>お問合せ内容</span><span><textarea name="content" cols="30" rows="5"></textarea></span></li><li><span>送信</span><span><input type="submit" value="送信"></span></li></ul> |
・CSSフレックスボックス(display:flex)の使い方
改良案1
Chosenに干渉しないよう改良
<style>ul.formul li { display: flex; flex-wrap: wrap; align-items: center;}span.flabel { flex-basis: 7rem; text-align:right;}ul.formul span:first-of-type label { margin-right:1rem;}ul.formul span:nth-of-type(2) { flex-grow: 1;}ul.formul input[type="text"], ul.formul textarea { width: 100%; box-sizing: border-box;}.chosen-container{ width: 100%!important;}</style> |