HTML Form: Placeholder text

This entry is part 6 of 10 in the series HTML Form

Placeholder text is supported in HTML 5 and it is getting popular in mobile app because of limited screen size.

In the previous example, we could have created the form using placeholder text.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>

<form method='post'>
    <input type='text' name='name' placeholder='Name'>
    <br>
    <input type='text' name='phone' placeholder='Phone'>
    <br>

    Comments:
    <br>
    <textarea name='comment' rows='3' placeholder='Your comment here'></textarea>
    <br>
    <input type='submit' value='Send'>
    <input type='reset' value='Clear'>
</form>
</body>
</html>


Placeholder Text Output

HTML Form: Form that is sent through Email

This entry is part 7 of 10 in the series HTML Form

Since we are not using CGI script to collect data from the form, we will create a form that we can send through email.

Clicking on the Send button in the form will launch the email program install in your PC.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>

<form method='post' action='mailto: johndoe@yahoo.com'>
    Name: <input type='text' name='name'>
    <br>
    Phone: <input type='text' name='phone'>
    <br>

    Comments:
    <br>
    <textarea name='comment' rows='3'></textarea>
    <br>
    <input type='submit' value='Send'>
    <input type='reset' value='Clear'>
</form>

</body>
</html>

HTML Form: Multiple selections using checkboxes

This entry is part 8 of 10 in the series HTML Form

Check boxes allow users to make multiple independent selections.

In the example below, we post a question to the users and as an example, we have England always checked.

This is done by using checked=’checked’.

The name=’country’ is the name for this set of checboxes.  If this form has a script, the value field will be used to identify the checkboxes that were selected.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>

<p>Which countries would you like to visit?</p>

<form method='post'>
    <input type='checkbox' name='country' value='england' checked='checked'>England<br>
    <input type='checkbox' name='country' value='brazil'>Brazil<br>
    <input type='checkbox' name='country' value='malaysia'>Malaysia<br>

</form>

</body>
</html>

 

HTML Form: Radio buttons

This entry is part 9 of 10 in the series HTML Form

At times, you only want users to make one selection.  This can be done by using radio buttons.

When you select a radio button, all the other buttons in the group are cleared.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>

<p>Where would you like to go next?</p>

<form method='post'>
    <input type='radio' name='country' value='england' checked='checked'>England<br>
    <input type='radio' name='country' value='brazil'>Brazil<br>
    <input type='radio' name='country' value='malaysia'>Malaysia<br>

</form>

</body>
</html>

 

 

HTML Form: Menu list

This entry is part 10 of 10 in the series HTML Form

For situations where you have a long list of options, consider using menu or list.

A list can contain as many options as needed, yet it takes up very little space on the form.

To create a list, start with a two-sided <select> tag.  Within it, place each option in its own <option> tag.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>

<p>Where would you like to go next?</p>

<form method='post'>
    <select name='country'>
        <option value='england'>England</option>
        <option value='brazil'>Brazil</option>
        <option value='malaysia'>Malaysia</option>
    </select>

</form>

</body>
</html>