HTML and CSS Reference
In-Depth Information
29. </label>
30.
31. </fieldset>
32.
33. <input type="submit" name="submit" value="Purchase">
34.
35. </form>
Here we can see each form control nested within a <label> element. The Name
form control uses an <input> element with a type attribute value of text ,
while the Email form control uses an <input> element with a type attribute
value of email . Both the Name and Email form controls include the required
Boolean attribute and a placeholder attribute.
The Number of Passes form control uses the <select> element and nested
<option> elements. The <select> element itself includes the required
Boolean attribute, and the first <option> element includes the selected
Boolean attribute.
The Comments form control uses the <textarea> element without any special
modifications. And lastly, outside of the <fieldset> element is the submit form
control, which is formed by an <input> element with a type attribute value of
submit .
7. With the form in place, it's time to add styles to it. We'll begin with a few default
styles on the <form> element itself and on the <input> , <select> , and
<textarea> elements.
Within the register section of our main.css file we'll want to add the following
styles:
Click here to view code image
1. form {
2. margin-bottom: 22px;
3. }
4. input,
5. select,
6. textarea {
7. font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue",
Helvetica, Arial, sans-serif;
8. }
We'll start by placing a 22 -pixel margin on the bottom of our form to help vertic-
ally space it apart from other elements. Then we'll add some standard font -based
Search WWH ::




Custom Search