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: 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: Creating a Submit or Reset button

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

For a form, we would need to include a Submit button on the form so that visitors can send the information to us.

The default button text is Submit, but we can use a value attribute to display different text on the button.

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

</head>
<body>
<br>
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'>

</body>
</html>