カテゴリー:
HTML5
閲覧数:531 配信日: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: 7 rem; text-align : right ; } ul.formul span:first-of-type label { margin-right : 1 rem; } 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> |