HTML Forms

Links to HTML projects source code & tutorials
Site Admin
Posts: 159
Joined: Sun Jun 26, 2022 10:46 pm

HTML Forms

Post by C0D3D »

Creating text input fields

Example 1

Code: Select all

<!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> 
----------------------------------------------------------------------
Together we are one! One we are many... Much Love from one brother to another...
Working together to achieve amazing things!
Teamwork is key.
Knowledge is Power!

4 Basic datatypes.
Strings: Which store a series of characters.
Int: Which store a full integer or number.
Float: A numeric value with a decimal.
Boolean: Only stores True or False and are very useful with if statements

----------------------------------------------------------------------
ImgBB Image upload

Who is online

Users browsing this forum: No registered users and 0 guests