HTML Forms

Post by **C0D3D** »

Creating text input fields

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Text Input Field</title>
</head>
<body>
    <form>
        <label for="user-name">Username:</label>
        <input type="text" name="username" id="user-name">
    </form>
</body>
</html>

Creating password input fields

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Password Input Field</title>
</head>
<body>
    <form>
        <label for="user-pwd">Password:</label>
        <input type="password" name="user-password" id="user-pwd">
    </form>
</body>
</html>

Checkboxes and radio buttons

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML checkboxes and radio buttons</title>
</head>
<body>
    <form method="post" action="" >
        <fieldset>
            <legend>Hobbies</legend>
            <input type="checkbox" name="hobby" value="sports" id="sport">
            <label for="sport">Sports</label>
            <input type="checkbox" name="hobby" value="music" id="music">
            <label for="music">Music</label>
            <input type="checkbox" name="hobby" value="reading" id="read">
            <label for="read">Reading</label>
        </fieldset>
        <fieldset>
            <legend>Gender</legend>
            <input type="radio" name="gender" value="male" id="male">
            <label for="male">Male</label>
            <input type="radio" name="gender" value="female" id="female">
            <label for="female">Female</label>
        </fieldset>
    </form>
</body>
</html>

Select boxes - A drop-down list

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML select box</title>
</head>
<body>
    <form action="">
        <select>
            <option value="Jeep">Jeep</option>
            <option value="Ford">Ford</option>
           <option value="Pontiac">Pontiac</option>
        </select>
    </form>
</body>
</html>

Select box with a pre-selected value

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML select box</title>
</head>
<body>
    <form action="">
        <select>
            <option value="Jeep">Jeep</option>
            <option value="Ford" selected="selected">Ford</option>
           <option value="Pontiac">Pontiac</option>
        </select>
    </form>
</body>
</html>

Grouping of options inside a select box

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML optgroup tag</title>
</head>
<body>
    <form>
        <select>
            <optgroup label="Sports cars">
                <option value="Porche">Porche</option>
                <option value="lamborghini">Lamborghini</option>
            </optgroup>
            <optgroup label="Luxury cars">
                <option value="mercedes">Mercedes</option>
                <option value="bentley">Bentley</option>
            </optgroup>
        </select>
    </form>
</body>
</html>

Enable multiple selection inside a select box

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML select box with multiple selection</title>
</head>
<body>
    <form action="">
        <select multiple="multiple">
            <optgroup label="Sports cars">
                <option value="ferrari">Ferrari</option>
                <option value="lamborghini">Lamborghini</option>
            </optgroup>
            <optgroup label="Luxury cars">
                <option value="mercedes">Mercedes</option>
                <option value="bentley">Bentley</option>
            </optgroup>
        </select>
    </form>
    <p><strong>Note:</strong> Press control or shift key on the keyboard while clicking on the other options to enable multiple selections.</p>
</body>
</html>

Textarea - A multi-line text input field

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML From Textarea</title>
</head>
<body>
    <form>
        <label for="address">Address:</label>
        <textarea rows="3" cols="30" name="address" id="address"></textarea>
    </form>
</body>
</html>

Creating buttons

Example 9

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML button</title>
</head>
<body>
	<form method="post" action="">
        <input type="button" value="Click Me">
    </form>
</body>
</html>

File select field

Example 10

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of file select form control</title>
</head>
<body>
	<form method="post" action="action.php">
        <label for="file-select">Select File:</label>
        <input type="file" name="upload" id="file-select">
    </form>
</body>
</html>

Grouping similar form fields

Example 11

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML fieldset tag</title>
</head>
<body>
    <form action="http://codedskills.net/" method="post">
        <fieldset>
            <legend>Gender</legend>
            <input type="radio" name="gender" value="male" id="male">
            <label for="male">Male</label>
            <input type="radio" name="gender" value="female" id="female">
            <label for="female">Female</label>
        </fieldset>
    </form>
</body>
</html>

Submit or reset a form - The use of submit and reset button

Example 12

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Submit and Reset Buttons</title>
</head>
<body>
	<form action="/examples/html/action.php" method="post">
        <label for="first-name">First Name:</label>
        <input type="text" name="first-name" id="first-name">
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>
</body>
</html>

HTML Forms

HTML Forms

Who is online