Tag | Name | Description |
---|---|---|
<table> | Table | The wrapper element for all HTML tables. |
<thead> | Table Head | The set of rows defining the column headers in a table. |
<tbody> | Table Body | The set of rows containing actual table data. |
<tr> | Table Row | The table row container. |
<td> | Table Data | The table row container. |
<tfoot> | Table Foot | The set of rows defining the footer in a table. |
Important things to remember about forms
Tag | Attributes | Description | |
---|---|---|---|
<form> | action | Where to send your form inputs. Add destination url | |
method | tells the form what to do with that information once it’s sent. Uses HTTP verb such as "POST" and "PUT" | <input> | type | Type of input such as: |
text | a simple textbox | ||
password | a textbox that hides the input values in *astericks | ||
number | textbox that reads numbers with option to add on the step attribute | ||
range | slider type with option to add min, max and step attribute | ||
checkbox | a simple checkbox | ||
radio | a simple radio button | ||
submit | creates a submit button | ||
id | id of the table that matches with <label> or any other | ||
name | Description of the input value such as "username". When sent, it will be displayed as name=value | ||
value | Value of the input. If you want to pre-fill the input, define a value | ||
step | Amount that increases when you have a 'number' or 'range' input type. Set the value to "1" and arrows will increase or decrease the value in the input by 1 | ||
list | when using <datalist> make sure the value matches datalist id | ||
required | makes input required | ||
min / max | sets the minimum or maximum for number type | ||
minlength / maxlength | sets the minimum or maximum character length for text type | ||
pattern | assign a regular expression(regex) e.g. pattern="[a-zA-Z0-9]+" requires input to include only numbers and latin characters. | ||
<select> | creates a dropdown selector. Pair it with <option value=""> to create the value for each selection | ||
<datalist> | Pair it with <input type="text" list=""> which value corresponds to <datalist> id. Add <option value=""> for each searchable value | ||
<textarea> | create a larger textbox defined by row="" and col="" attribute |
Property | Value | Description |
---|---|---|
major axis (horizontal align) | ||
justify-content | ||
flex-wrap | ||
flex-grow | ||
flex-shrink | ||
cross axis (vertical align) | ||
align-items | ||
align-content | flex-start | elements will be positioned at the top of the parent container with no space in-between. |
flex-end | elements will be positioned at the bottom of the parent container with no space in-between. | |
center | elements will be positioned at the center of the parent container with no space in-between. | |
space-between | elements will be positioned on top and bottom with space between them. | |
space-around | elements will be positioned with even space between them and from top and bottom. | |
stretch | if min-height or no height is specified, elements will stretch to fill the gap between top and bottom of parent container. | |
Other | ||
flex-direction | row | default value: elements will be positioned as a row |
row-reverse | elements will be positioned in a row from right to left | |
column | starting from top left corner elements will be stacked in a column | |
column-reverse | starting from bottom left corner elements will be stacked from the bottom |