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>