HTML form notes

wild-web-dev's photo
wild-web-dev

To Link an input with label for and id should be same.

Two ways to write radio buttons

There are two ways to label radio button elements. One is to enclose the whole tag inside tags:

<label>
    <input type="radio" name="choice" value="HTML" /> Learn HTML 
</label>

<label>
    <input type="radio" name="choice" value="Java" /> Learn JavaScript 
</label>

Note: name attribute is same for both inputs, this way they can be grouped together.

Html Radio Button Label

Another alternative is to provide an ID for each radio element and then use that ID in the for attribute of the label.

Small Here is another example; we are using a fieldset element to show better grouping of the choices.

<form id="radio_btn_select">
 <fieldset>
    <legend>Selecting elements</legend>
    <label>Choose one option: </label>           

    <input type="radio"  name="fontSizeControl"  id="sizeSmall"
 value="small"  checked="checked" />
    <label for="sizeSmall">small</label>

    <input type="radio"  name="fontSizeControl"  id="sizeMed"
 value="medium" />
    <label for="sizeMed">medium</label>

    <input type="radio"  name="fontSizeControl"  id="sizeLarge"
 value="large" />
    <label for="sizeLarge">large</label>

 </fieldset>    

</form>

All radio buttons with same name are treated as a group. When the form is submitted it will include contents of ‘value’ attribute corresponding to the selected radio button.

In Radio buttons give "name" and "value" attributes so it can be submitted with proper information.

Select Element

<select name="pets" id="pet-select">
                <option disabled selected value value="">Select an option</option>
                <option value="dog">Challenges</option>

Notice disabled selected value, What does it do?

Checkboxes

<label>
<input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox">
Front-end Developer
</label>

You can wrap in a label element, OR alternatively you can do like mdn website.

In this example we've got name of "prefer" and value of "front-end-projects". When the form is submitted, the data name/value pair will be prefer=front-end-projects

If the value attribute was omitted, the default value for the checkbox is on, so the submitted data in that case would be prefer=on

HTML5