Skip to content

Instantly share code, notes, and snippets.

@humphd

humphd/form-with-bootstrap.html

Created March 29, 2020 18:19
Show Gist options
  • Save humphd/5bba7ac7e799cd38d03c35adc3b1a5b2 to your computer and use it in GitHub Desktop.
Save humphd/5bba7ac7e799cd38d03c35adc3b1a5b2 to your computer and use it in GitHub Desktop.
Download ZIP
Forms, CSS, and Bootstrap Examples
Raw
form-with-bootstrap.html
<!DOCTYPE html>
<html>
<head>
<title>Form with CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Forms and Bootstrap CSS Styling</h1>
<p>
This form demonstrates many of the topics we have been discussing this
week. For this sample form, we are building a User Feedback Form.
</p>
<form action="/feedback" method="post">
<label for="feedback-user">Username</label>
<input
class="form-control"
id="feedback-user"
name="username"
autocomplete="username"
type="text"
autofocus
tabindex="1"
maxlength="25"
>
<label for="feedback-fullname">Fullname</label>
<input
class="form-control"
id="feedback-fullname"
name="name"
autocomplete="name"
type="text"
tabindex="2"
>
<label for="feedback-email">Email</label>
<input
id="feedback-email"
class="form-control"
name="email"
autocomplete="email"
type="email"
tabindex="3"
>
<label for="feedback-date">Date</label>
<input
id="feedback-date"
class="form-control"
name="date"
type="date"
tabindex="4"
>
<label for="feedback-problem">Problem</label>
<select
id="feedback-problem"
class="form-control"
name="problem"
tabindex="5"
>
<option>Network</option>
<option>User Interface</option>
<option>Documentation</option>
<option>Website</option>
<option>Other</option>
</select>
<textarea
id="feedback-message"
class="form-control mt-3"
name="message"
rows="10"
tabindex="6"
placeholder="Tell us about your problem..."
>
</textarea>
<label for="feedback-file">Screenshot</label>
<input
id="feedback-file"
class="form-control-file"
type="file"
name="file"
tabindex="7"
accept="image/png, image/jpeg"
>
<div class="d-flex flex-row-reverse mt-2">
<input class="btn btn-primary" type="submit" name="submit" value="Submit" tabindex="8">
<input class="btn btn-secondary mr-3" type="reset" name="reset" value="Reset" tabindex="9">
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Raw
form-with-css.html
<!DOCTYPE html>
<html>
<head>
<title>Form with CSS</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<h1>Forms and CSS Styling</h1>
<p>
This form demonstrates many of the topics we have been discussing this
week. For this sample form, we are building a User Feedback Form.
</p>
<!-- POST because we'll allow uploading files (too big for URL) -->
<form name="feedback" action="/feedback" method="post">
<label for="feedback-user">Username</label>
<input
id="feedback-user"
name="username"
maxlength="25"
autocomplete="username"
type="text"
autofocus
tabindex="1"
/>
<label for="feedback-fullname">Fullname</label>
<input
id="feedback-fullname"
name="name"
autocomplete="name"
type="text"
tabindex="2"
/>
<label for="feedback-email">Email</label>
<input
id="feedback-email"
name="email"
autocomplete="email"
type="email"
tabindex="3"
/>
<label for="feedback-date">Date</label>
<input id="feedback-date" name="date" type="date" tabindex="4" />
<label for="feedback-problem">Problem</label>
<input
type="text"
list="feedback-problems"
name="problem"
placeholder="I'm having a problem with the..."
tabindex="5"
/>
<datalist id="feedback-problems">
<option value="Network">
<option value="User Interface">
<option value="Documentation">
<option value="Website">
<option value="Other">
</datalist>
<textarea
id="feedback-message"
name="message"
rows="10"
tabindex="6"
placeholder="What's happening?"
></textarea>
<label for="feedback-file">Screenshot</label>
<input
type="file"
accept="image/png, image/jpeg"
id="feedback-file"
name="file"
tabindex="7"
/>
<div class="buttons">
<input type="submit" name="Submit" value="Submit" tabindex="8" />
<input type="reset" name="Reset" value="Reset" tabindex="9" />
</div>
</form>
</body>
</html>
Raw
form-without-css.html
<!DOCTYPE html>
<html>
<head>
<title>Form with CSS</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Forms and CSS Styling</h1>
<p>
This form demonstrates many of the topics we have been discussing this
week. For this sample form, we are building a User Feedback Form.
</p>
<!-- POST because we'll allow uploading files (too big for URL) -->
<form name="feedback" action="/feedback" method="post">
<label for="feedback-user">Username</label>
<input
id="feedback-user"
name="username"
maxlength="25"
autocomplete="username"
type="text"
autofocus
tabindex="1"
/>
<label for="feedback-fullname">Fullname</label>
<input
id="feedback-fullname"
name="name"
autocomplete="name"
type="text"
tabindex="2"
/>
<label for="feedback-email">Email</label>
<input
id="feedback-email"
name="email"
autocomplete="email"
type="email"
tabindex="3"
/>
<label for="feedback-date">Date</label>
<input id="feedback-date" name="date" type="date" tabindex="4" />
<label for="feedback-problem">Problem</label>
<input
type="text"
list="feedback-problems"
name="problem"
placeholder="I'm having a problem with the..."
tabindex="5"
/>
<datalist id="feedback-problems">
<option value="Network">
<option value="User Interface">
<option value="Documentation">
<option value="Website">
<option value="Other">
</datalist>
<textarea
id="feedback-message"
name="message"
rows="10"
tabindex="6"
placeholder="What's happening?"
></textarea>
<label for="feedback-file">Screenshot</label>
<input
type="file"
accept="image/png, image/jpeg"
id="feedback-file"
name="file"
tabindex="7"
/>
<div class="buttons">
<input type="submit" name="Submit" value="Submit" tabindex="8" />
<input type="reset" name="Reset" value="Reset" tabindex="9" />
</div>
</form>
</body>
</html>
Raw
styles.css
/**
* Add some fonts from Google Fonts
*
* Raleway - https://fonts.google.com/specimen/Raleway
* Open Sans - https://fonts.google.com/specimen/Open+Sans
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("https://fonts.googleapis.com/css?family=Raleway");
/**
* Apply border-box to all elements in the page, so content, padding, and border
* are all taken into account when calculating width and height.
*/
* {
box-sizing: border-box;
}
body {
padding: 1em;
font-family: "Open Sans", sans-serif;
}
form {
/* apply some space around our form, and add a border */
margin-top: 3em;
padding: 2em;
border: 1px solid black;
/* set a max-width, so it doesn't expand with the window, using the rest as margin */
max-width: 800px;
min-width: 400px;
margin-left: auto;
margin-right: auto;
/* use a grid layout for items in the form: 2 columns, with most of the width in the second. */
display: grid;
grid-template-columns: 1fr 3fr; /*0.3fr 1fr*/;
/* align all items in the grid cells center, and add 20px of space between the rows/columns */
align-items: center;
grid-gap: 20px;
}
form label {
/* Use a better font and text size for our labels, to make them easy to read */
font-family: "Raleway", sans-serif;
font-size: 1.5em;
}
/**
* Style the input controls (and textarea) so they are full width in their cells,
* use a larger font-size, have a light gray border, and slightly rounded corners.
*/
input,
textarea {
width: 100%;
padding: 0.3em;
font-size: 1.5em;
border: 1px solid rgb(206, 212, 218);
border-radius: 0.25em;
}
/**
* When the input controls (and textarea) have the focus, change the border
* colour to light blue so it's clear where you're entering text.
*/
input:focus,
textarea:focus {
outline: 3px solid lightskyblue;
}
/**
* For our two "submit" style buttons, make them stand out a bit more
*/
input[type="submit"],
input[type="reset"] {
width: 150px;
background-color: rgb(0, 123, 255);
color: white;
}
/**
* Also do something when you hover or focus them
*/
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus {
background-color: #0069d9;
}
/**
* Stretch our texteara from the start of the grid to the end. NOTE: the
* grid has 2 columns, but the numbers here are for the outside lines of each
*/
textarea {
grid-column: 1 / 3;
}
/**
* Move the buttons to the right side of the right column
*/
.buttons {
grid-column: 2 / 3;
text-align: right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment