1
練習用のフォームを作成していますが、テキストと入力ボックスの配置に問題があります。css/html5のフォーム入力フィールドの配置
：私はもっとこのような何かを反映するために、テキスト&入力フィールドを移動して行くことができますどのように
body {
\t background-color:#496491;
\t color: white;
\t text-shadow: 2px 2px #000000;
}
div {
\t background-color:#6F83A8;
}
div.form-group {
width: 500px;
margin: auto;
\t height: 50px;
\t border-radius: 15px;
border: 2px solid #A6B4CF;
padding: 5px;
width: 500;
height: 50px;
}
.form-horizontal {
\t width:30%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
\t \t <title>Form1</title>
\t \t <link rel="stylesheet" href="css/form1.css" />
<body>
<b>Progress:</b> <progress max="2" value="0">Step 1 of 3</progress>
<br><br>
\t \t
<form class="form-horizontal">
<fieldset>
<legend>Register New User</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="username">Username:</label>
<input id="username" name="username" type="text" placeholder="enter a new username" class="form-control input-md">
</div>
</div>
<br>
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password:</label>
<input id="password" name="password" type="password" placeholder="6 digits or more" class="form-control input-md">
</div>
</div>
</fieldset>
</form>
<form class="form-horizontal">
<fieldset>
<legend>Personal Details</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Name:</label>
<input id="name" name="name" type="text" placeholder="first and last name" class="form-control input-md">
</div>
</div>
<br>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="address">Address:</label>
<textarea class="form-control" id="address" name="address">street number and name</textarea>
</div>
</div>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="suburb">Suburb:</label>
<input id="suburb" name="suburb" type="text" placeholder="suburb" class="form-control input-md">
</div>
</div>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="city">City:</label>
<input id="city" name="city" type="text" placeholder="city" class="form-control input-md">
</div>
</div>
<br>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="country">Country:</label>
<select id="country" name="country" class="form-control">
<option value="1">--Please Select a Country--</option>
<option value="2">Australia</option>
<option value="3">New Zealand</option>
</select>
</div>
</div>
<br>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="state">State:</label>
<select id="state" name="state" class="form-control">
<option value="1">--Please Select a State--</option>
<option value="2">SA</option>
<option value="3">NT</option>
</select>
</div>
</div>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="postcode">Postcode:</label>
<input id="postcode" name="postcode" type="text" placeholder="0000" class="form-control input-md">
</div>
</div>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">Email:</label>
<input id="email" name="email" type="text" placeholder="[email protected]" class="form-control input-md">
</div>
</div>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="phone">Phone:</label>
<input id="phone" name="phone" type="text" placeholder="(00)-000-0000" class="form-control input-md">
</div>
</div>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="website">Website:</label>
<input id="website" name="website" type="text" placeholder="http://www.example.com" class="form-control input-md">
</div>
</div>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="age">Age:</label>
<input id="age" name="age" type="text" placeholder="" class="form-control input-md">
</div>
</div>
</fieldset>
<br><br>
Spam check.
<p><label>What colour is black? (choose a colour) <input type="color" name="carcolor" /></label></p>
</form>
<button type=submit>Continue</button>
\t </body>
</html>：ここ
は私のHTML/CSSですフォームアイテムのすべてのコンテンツが中央に配置され、テキストは常に入力フィールドの左上にあります。たとえば、入力ボックスが「アドレス」テキストより大きいアドレスの場合です。 （下の「郊外」セクションは無視して、画像でそれを編集するのを忘れました）ありがとうございます！