HTM LS ADDING FORMS AND TABLES
Formatting your Text
<form> Tags used to create a form. Combined action="url"
... </form> with attributes to show how the form Shows where data is sent when a visitor submits
will operate. the form.
method="" Refers to the HTIP method and how to enctype=""
send the form data. Dictates how the form data is supposed to be
encoded whensubmitting information to the
web server. Only used with method="post".
Autocomplete Turns autocomplete on or off on the Novalidate Defines whether the form should
form. be validated when submitted.
Used to show where the form
Accept-charsets Identifies character encoding on the Target response should be displayed after
form submission. being submitted. Used with _blank,
_self, _pa rent_top
<fieldset> .... Identifies the group of all fields on the form.
<label> ... A label telling the user what to
</field set> </label> enter in each field.
<legend> .... A caption for the fieldset element. The input attribute shows what
<input/>
type of field information to receive
</legend>
from users.
HTML5 INPUTTYPEATTRIBUTES
type="" Specifies field input type, including text, name="" The name of the form
password, date-time, checkbox. etc.
value="" The value of input field information. size="" The input element width in characters
maxlength="" Maximum input element characters Required Tag used to ensure the <input> element
allowed. is completed before submitting the form.
step="'' The number intervals for an input width="" Width in pixels of an <input> element.
field.
height="" Height in pixels of an <input> element. placeholder="" A hint for users showing what the
<input> element value should be.
pattern="" Checks the input against a defined min='"' The minimum value of an <input>
value to ensure the information is element.
correct.
Autofocus Ensures the <input> element comes
max="" The maximum value of an <input>
into focus once a page loads.
element.
Disabled Disables an <input> element on the <textarea> Specifies a large text input for longer
form. . .. </textarea> messages.
<select> ... Drop-down box for users to select from
</select> options.
-~"
A""IO.-- I
----
ft.., II zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPO
,,.,...--
zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA
,.. e-.
-·--
-T•ot
--
---
..........
....,.c_
.,.
®i...•q,,i
@•
'" (i)*
GJ•
a~ ......
'" zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLK
'"" <il• zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONM
'"
Em
HTML5 SELECT ATTRIBUTES
(To be Used in </select> Tags)
name="" The title for a drop-down combination size=" The number of options in a drop-down
box. box.
Multiple Allows multiple sections to be made at Required Requires a value to be selected before
onetime. a user can submit a form.
<optgroup> Specifies can entire grouping of <option> Defines one of the available options in
available options. the drop-down list.
</optgroup> </option>
Option Attributes
value='"' Explains an option's value available for Selected Shows the default selection option for
selection. users.
<button> ... Shows the clickable button for users to
</button> submit options.
Example of Form
<form action="action_page.php" method="post">
<fields et>
<legend>basic information:</legend>
First name:<br>
<input type="text" name="firstname" value="Matt"
placeholder="First Name"><br>
Last name: <br>
<input type="text" name="lastname" value="Banner"
placeholder="last name"><br><br>
Blog topic:<br>
<select>
<option value="cooking">Cooking</option>
<option value="SEO">SEO</option>
<option value="Fashion">Fashion</option>
</select>
<textarea name="description"></textarea>
<input type="submit" value="Submit">
</fieldset>
</form>
HTMLS TABLE FORMATTING
(To be Used in </select> Tags)
<table> These tags define all the content related <caption> A description of the table's
... </table> to a table. ... </caption> purpose and the information
it contains.
<the/ahd>d The headers that label the content in <tbody> The body of the table data or
··· < t ea >each column. ... </tbody> information.
<tfoot> Describes all footer content. <tr> Content within a single row.
... <tfoot> ... </tr>
<th> The data in a single header item. <td> ... zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGF
Content within a single table
... </th> <ltd> cell.
<colgroup> Groups columns for formatting <col/> A single column of information
purposes. within a table.
</colgroup>
An Example of Table Formatting
<table>
<colgroup>
<col span="2" style="background-color:
#182afb">
<col style="background-color: #2f1475b">
</colgroup>
<tr>
<th>Blog title</th>
<th>URL</th>
<th>DA</th>
</tr>
<tr>
<td>On Blast Blog</td>
<td>www.onblastblog.com</td>
<td>S2</td>
</tr>
</table>
HTMLS OBJECTS AND IFRAMES
Objects
<object> ··· Describes a file type to be height="" The height of the object.
</object> embedded (audio, video, PDFs, etc.).
width="" Width of the object. type=?" The type of media the object contains.
usemap="" The name of the client-side image
map within the <object> tag.
iFrames formatting
<iframe> name="" The name of the <iframe>
An inline frame that allows external
information to be embedded into
</iframe> a document.
src="" The source URL for the object within the srcdoc=?" The HTML content within the frame.
<iframe>.
Width="" The width of the <iframe>. <param /> Adds extra parameters to help
customize the iframe's content.
<embed> A container for another external
... </embed> application or plug-in. Embed can also be
used with the height, width, src, and type
tags above.
Examples
<object width="425" height="225"></object>
<iframe src="blogging_iframe.htm" width="300"
height="600"></iframe>
<embed src="bringonblogging.swf' width="400"
height="SOO"></embed>
HTMLS NEW HTMLS TAGS
<header> The header block for a document. <footer> The footer block for a document
... </header> ... </footer> or section.
<main> The main content of a document. <article> Identifies an article within a
... </main> ... </article> document.
<aside> <section> A section block in a document.
For content contained in a sidebar .
... </aside> ... </section>
<details> Additional facts or information that <dialog> A box or window for dialog.
... </details> users can view/hide. ... </dialog>
<figcaption> A <figure> element caption that <figure> A content block featuring diagrams,
... </figcaption> describes the figure. ... </figure> photos.illustrations, and more .
<mark> Displays highlighted text within the <nav> Navigation links for users.
... </mark> content. ... </nav>
<menuitem> The menu item a user can raise <meter> The scalar measurement within a
from a popup menu. . .. </meter> known array.
</menu item>
<progress> The progress of a task, usually <rp> ... </rp> Display text in browsers that don't
used for a progress bar. support ruby annotations.
</progress>
<rt> ... </rt> Display East Asian typography <ruby> ... A Ruby annotation for East Asian
character details. </ruby> typography.
Format part of text in a
<summary> Contains a heading for a <bdi> ... </bdi> different direction from
... </summary> <details> element. other text.
<time> ... Identifies time and date. <wbr> A line break within content.
</time>
