Basic HTML

[ProjectX]

Adding a type attribute

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.

<input type="text" >

[ProjectX]

Adding text field to represent data.

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">.

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

>

[ProjectX]

Placeholder to give hints to type in text boxes.

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">.

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

[ProjectX]

Prevent people from moving onto the next stage or avoiding entering details.

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" required name="catphotourl" placeholder="cat photo URL">

[ProjectX]

Adding buttons

Use the button element to create a clickable button. For example, <button>Click Here</button> creates a button with the text Click Here.

Add a button element with the text Submit below the input element. The default behavior of clicking a form button without any attributes submits the form to the location specified in the form's action attribute.

<button>Submit</button>

[ProjectX]

Making sure the button aligned.

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 <input type="Submit"/> </button>

[ProjectX]

One answer from multi choice.

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 <input type="text" name="catphotourl" placeholder="cat photo URL" required>

[ProjectX]

Clicking a word to also highlight it

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>

[ProjectX]

Adding ID Attributes

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>

[ProjectX]

Making sure you can't select both circle buttons at the same time.

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" name="indoor-outdoor" type="radio"> Indoor</label>

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