カテゴリー:
HTML5
閲覧数:415 配信日: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>