31
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Bootstrapでフォーム部品を横一行に表示したい

Last updated at Posted at 2015-01-29

Bootstrapって、横幅全部使ってフォーム部品が表示される、みたいなのがデフォルトっぽくて、
日付とか時間とかね、入力欄は小さくていいから一行におさめたいって場合に結構悩んだのでメモ。
ちょっと、labelの使い方が間違ってるがまあとりあえずこんな感じで。

				<div class="form-inline">
					<div class="form-group">
						<label>日付</label>
						<input name="jikan" id="datepicker" class="form-control" type="text">
					</div>
					<div class="form-group">
						<label>時間</label>
						<select name="hour" class="form-control">
							<option>10</option>
							<option>11</option>
							<option>12</option>
						</select> 
						<label>:</label>
					</div>
					<div class="form-group">
						<select name="min" class="form-control">
							<option>57</option>
							<option>58</option>
							<option>59</option>
						</select> 
					</div>
				</div>

もしこれの時間セレクト部分をCakePHPのフォームヘルパーを使って表現したい、
ということだったら、以下のように書けばよい。

					<div class="form-group">
<?php
					echo $this->Form->input('jikan', array(
						'type' => 'time',
						'label' => '時間',
						'timeFormat' => 24,
						'selected' => '13:30:00',
						'class' => 'form-control',
						'interval' => 15
					));
?>
					</div>

formのnameは自動的にhourがついてくれる

<select id="ModelJikanHour" class="form-control" name="data[Model][jikan][hour]">
31
28
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?