<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Bootstrap</title>
</head>
<body>
<div class="container">
<h2>Medical Questionnaire</h2>
<form>
<fieldset class="form-group">
<legend>Owner Info</legend>
<div class="form-group">
<label class="form-control-label" for="ownername">Owner name</label>
<input class="form-control form-control-sm is-valid" type="text" id="ownername" placeholder="Your Name">
</div><!-- form-group -->
<div class="form-group form-inline">
<label class="form-control-label" for="owneremail">Email address</label>
<input class="form-control mx-sm-2 is-invalid" type="email" id="owneremail" aria-describedby="emailHelp" placeholder="Enter email">
<small class="form-text text-muted" id="emailHelp">We'll never share your email</small>
</div><!-- form-group -->
</fieldset><!-- fieldset -->
<fieldset class="form-group">
<legend>Pet Info</legend>
<div class="form-group">
<label class="form-control-label" for="petname">Pet name</label>
<input class="form-control form-control-lg" type="text" id="petname" placeholder="Your Pet's name">
</div><!-- form-group -->
<div class="form-group">
<label class="form-control-label" for="pettype">Pet type</label>
<select class="form-control" id="pettype">
<option>Choose</option>
<option value="cat">Dog</option>
<option value="cat">Cat</option>
<option value="bird">Other</option>
</select>
</div><!-- form-group -->
<div class="form-group">
<label class="form-control-label" for="reasonforvisit">Reason for today's visit</label>
<textarea class="form-control" id="reasonforvisit" rows="3"></textarea>
</div><!-- form-group -->
</fieldset><!-- fieldset -->
<fieldset class="form-group">
<legend>Pet Medical Data</legend>
<div class="form-group">
<label class="d-block">Has your pet been spayed or neutered?</label>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="spayneut" value="yes" checked> Yes
</label>
</div><!-- form-check -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="spayneut" value="no"> No
</label>
</div><!-- form-check -->
</div><!-- form-group -->
<div class="form-group">
<label>Has the pet had any of the following in the past 30 days</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Abdominal pain
</label>
</div><!-- form-check -->
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Lack of appetite
</label>
</div><!-- form-check -->
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Weakness
</label>
</div><!-- form-check -->
</div><!-- form-group -->
</fieldset><!-- form-group -->
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div><!-- content container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
form-row col-md-2 col-auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Bootstrap</title>
</head>
<body>
<div class="container">
<h2>Medical Questionnaire</h2>
<form>
<fieldset class="form-group">
<legend>Owner Info</legend>
<div class="form-group row">
<label class="col-md-2 text-md-right col-form-label" for="ownername">Owner</label>
<div class="col-md-10">
<input class= "form-control"
type="text" id="ownername" placeholder="Your Name">
</div>
</div><!-- form-group -->
<div class="form-group row">
<label class="col-md-2 text-md-right col-form-label" for="owneremail">Address</label>
<div class="col-md-10">
<input class="col-md-10 form-control"
type="text" id="owneremail" placeholder="Address">
</div>
</div><!-- form-group -->
<div class="form-group form-row">
<div class="form-group offset-md-2 col-auto">
<label class="sr-only col-form-label" for="ownercity">City</label>
<input class="form-control"
type="text" id="ownercity" placeholder="City">
</div><!-- form-group -->
<div class="form-group col-auto">
<label class="sr-only" for="ownerzip">Zip</label>
<input class="form-control"
type="text" id="ownerzip" placeholder="Zip">
</div><!-- form-group -->
</div><!-- form-group -->
<div class="form-group row">
<div class="offset-md-2 col-auto">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</div>
</fieldset><!-- fieldset -->
</form>
</div><!-- content container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
input-group
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Bootstrap</title>
</head>
<body>
<nav class="navbar navbar-dark bg-primary navbar-expand-sm">
<div class="container">
<div class="navbar-brand d-none d-lg-block">Wisdom Pet Medicine</div>
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Mission</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Staff</a>
<a class="nav-item nav-link" href="#">Testimonials</a>
</div><!-- navbar-nav -->
<form class="form-inline d-none d-md-block">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input class="form-control" type="text" id="search" placeholder="Search for...">
<div class="input-group-append">
<button class="btn btn-warning" type="button">Go</button>
</div>
</div>
</form>
</div><!-- container -->
</nav>
<div class="container mt-4">
<h2>Help Another Pet</h2>
<form>
<fieldset class="form-group">
<legend>Your Info</legend>
<div class="form-group">
<label class="form-control-label" for="name">Name</label>
<input class="form-control" type="text" id="name" placeholder="Your Name">
</div><!-- form-group -->
<div class="form-group">
<label class="form-control-label" for="owneremail">Email</label>
<input class="form-control" type="text" id="owneremail" placeholder="Address">
</div><!-- form-group -->
<div class="form-group">
<label class="form-control-label" for="donationamt">Donation Amount</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" checked>
</div>
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="donationamt" placeholder="Amount">
<div class="input-group-append">
<div class="input-group-text">
.00
</div>
</div>
</div>
</div><!-- form-group -->
<button class="btn btn-primary" type="submit">Submit</button>
</fieldset><!-- fieldset -->
</form>
</div><!-- content container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
5537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
