0% found this document useful (0 votes)

111 views

HTML Syntax Elements

The document describes various HTML elements and how to structure a basic HTML form, including input fields, radio buttons, checkboxes and labels. It shows how to add attributes like type, name, id, required and more to create a complete form layout.

Uploaded by

moumanmimo85

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

111 views

HTML Syntax Elements

Uploaded by

moumanmimo85

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 8

start

<html>or <!DOCTYPE html>

first title
<h1> </h1>
to creat a section
<section> </section>

second title
<h2> </h2>

third title
<h3> </h3>

paragraph element
<p> </p>

important words
<strong></strong>

anchor element to embed a link

<a href=”link here”
> text of the link </a>
target="_blank" href”” (to open link in new tab)

to add a photo
<img
id= image id
src= image source
alt ”image description” >

unordered list element

ordered list element

emphacize
<em> </em>

</figure>

To create a button

The action attribute indicates where form data should be sent. For example, <form
action="/submit-url"></form> tells the browser that the form data should be sent to
the path /submit-url.
<form
action="https://freecatphotoapp.com/submit-cat-photo"></form>

The input element allows you several ways to collect data from a web form. Like img
elements, input elements are self-closing and do not need closing tags.

Nest an input element in the form element.

There are many kinds of inputs you can create using the type attribute. You can easily
create a password field, reset button, or a control to let users select a file from their
computer.
Create a text field to get text input from a user by adding the type attribute with the value
text to the input element.

In order for a form's data to be accessed by the location specified in the action attribute,
you must give the text field a name attribute and assign it a value to represent the data being
submitted. For example, you could use the following syntax for an email address text field:
<input type="text" name="email">.

Add the name attribute with the value catphotourl to your text field.

<input type="text" name="catphotourl">

Placeholder text is used to give people a hint about what kind of information to enter into an
input. For example, <input type="text" placeholder="Email address">.

Add the placeholder text cat photo URL to your input element.

<input type="text" name="catphotourl" placeholder="cat photo URL">

To prevent a user from submitting your form when required information is missing, you need
to add the required attribute to an input element. There's no need to set a value to the
required attribute. Instead, just add the word required to the input element, making
sure there is space between it and other attributes.

<input type="text" name="catphotourl" placeholder="cat photo URL"

required >

Even though you added your button below the text input, they appear next to each other on
the page. That's because both input and button elements are inline elements, which
don't appear on new lines.

The button you added will submit the form by default. However, relying on default behavior
may cause confusion. Add the type attribute with the value submit to the button to make
it clear that it is a submit button.
<button type="submit">Submit</button>

You can use radio buttons for questions where you want only one answer out of multiple
options.

Here is an example of a radio button with the option of cat: <input type="radio">
cat. Remember that input elements are self-closing.

Before the text input, add a radio button with the option set as: Indoor
<input type="radio"> Indoor

label elements are used to help associate the text for an input element with the input
element itself (especially for assistive technologies like screen readers). For example,
<label><input type="radio"> cat</label> makes it so clicking the word cat also
selects the corresponding radio button.

Nest your radio button inside a label element.

<label> <input type="radio"> Indoor </label>

The id attribute is used to identify specific HTML elements. Each id attribute's value must
be unique from all other id values for the entire page.

Add an id attribute with the value indoor to the radio button. When elements have multiple
attributes, the order of the attributes doesn't matter.

<label><input type="radio" id="indoor"> Indoor</label>

Notice that both radio buttons can be selected at the same time. To make it so selecting one
radio button automatically deselects the other, both buttons must have a name attribute with
the same value.

Add the name attribute with the value indoor-outdoor to both radio buttons.
<label><input id="indoor" type="radio" name="indoor-outdoor">
Indoor</label>

<label><input id="outdoor" type="radio" name="indoor-outdoor">

Outdoor</label>
If you select the Indoor radio button and submit the form, the form data for the button is
based on its name and value attributes. Since your radio buttons do not have a value
attribute, the form data will include indoor-outdoor=on, which is not useful when you
have multiple buttons.

Add a value attribute to both radio buttons. For convenience, set the button's value
attribute to the same value as its id attribute.
<label><input id="indoor" type="radio"
name="indoor-outdoor" value="indoor"> Indoor</label>
<label><input id="outdoor" type="radio"
name="indoor-outdoor" value="outdoor"> Outdoor</label>

The fieldset element is used to group related inputs and labels together in a web form.
fieldset elements are block-level elements, meaning that they appear on a new line.

Nest the Indoor and Outdoor radio buttons within a fieldset element, and don't forget
to indent the radio buttons.

<fieldset>
<label><input id="indoor" type="radio"
name="indoor-outdoor" value="indoor"> Indoor</label>
<label><input id="outdoor" type="radio"
name="indoor-outdoor" value="outdoor"> Outdoor</label>
</fieldset>

The legend element acts as a caption for the content in the fieldset element. It gives
users context about what they should enter into that part of the form.

Add a legend element with the text Is your cat an indoor or outdoor cat?
above both of the radio buttons.

<fieldset>
<legend>Is your cat an indoor or outdoor cat?</legend>
<label><input id="indoor" type="radio"
name="indoor-outdoor" value="indoor"> Indoor</label>
<label><input id="outdoor" type="radio"
name="indoor-outdoor" value="outdoor"> Outdoor</label>
</fieldset>
Forms commonly use checkboxes for questions that may have more than one answer. For
example, here's a checkbox with the option of tacos: <input type="checkbox">
tacos.

Under the legend element you just added, add an input with its type attribute set to
checkbox and give it the option of:

Loving

<input id="loving" type="checkbox"> Loving

There's another way to associate an input element's text with the element itself. You can
nest the text within a label element and add a for attribute with the same value as the
input element's id attribute.

Associate the text Loving with the checkbox by nesting only the text Loving in a label
element and giving it an appropriate for attribute.

<input id="loving" type="checkbox" for="loving"> <label

for="loving" >Loving</label>

Add another checkbox after the one you just added. The id attribute value should be lazy
and the name attribute value should be the same as the last checkbox.

Also add a label element to the right of the new checkbox with the text Lazy. Make sure to
associate the label element with the new checkbox using the for attribute.

<input id="lazy" type="checkbox" name="personality" > <label

for="lazy"> Lazy </label>

Like radio buttons, form data for selected checkboxes are name / value attribute pairs.
While the value attribute is optional, it's best practice to include it with any checkboxes or
radio buttons on the page.

Add a value attribute to each checkbox. For convenience, set each checkbox's value
attribute to the same value as its id attribute.

<input id="loving" type="checkbox" name="personality"

value="loving"> <label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality"
value="lazy"> <label for="lazy">Lazy</label>
<input id="energetic" type="checkbox"
name="personality" value="energetic"> <label for="energetic">
Energetic</label>

In order to make a checkbox checked or radio button selected by default, you need to add
the checked attribute to it. There's no need to set a value to the checked attribute. Instead,
just add the word checked to the input element, making sure there is space between it
and other attributes

<input id="loving" type="checkbox" name="personality"

value="loving" checked> <label for="loving">Loving</label>

After the main element, add a footer element.

Add a head element above the body element

The title element determines what browsers show in the title bar or tab for the page.
<head>
<title> CatphotoApp </title>
</head>
Add the lang attribute with the value en to the opening html tag to specify that the
language of the page is English.
<html lang="en" >
All pages should begin with <!DOCTYPE html>. This special string is known as a
declaration and ensures the browser tries to meet industry-wide specifications.

Add this declaration as the first line of the code.

<!DOCTYPE html>
<html lang="en">

You can set browser behavior by adding self-closing meta elements in the head. Here's an
example:

Tell the browser to parse the markup into multiple languages by creating a meta element as
a child of the head element. Set its charset attribute to UTF-8.
<head>
<meta charset="UTF-8"
<title>CatPhotoApp</title> </head>