Individual form controls automatically receive some
global styling. All textual <input>
,
<textarea>
, and
<select>
elements with .form-control
are set to width: 100%;
by default. Wrap labels and controls in .form-group
for optimum spacing.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!-- w w w. ja va 2 s .c o m-->
<body style='margin:20px;'>
<form>
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="exampleInputEmail">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword">Password</label>
<input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</fieldset>
</form>
</body>
</html>