Html tutorial for forms- How can you make forms in Html with CSS



Hey, friends This is the tutorial of forms. How can you make a form and run it.

Step-1:-  1st make the bioler plate of HTML.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Step-2:- Now add the form tag under the body tag with any 'class' and any 'action'.
<form action="backend.php" class="form"></form>

Step-3:- Now add the components of the form like name, phone no, e-mail, gender, date and add label for it if necessry.
<label for="name"></label> Name: <input type="text" 
placeholder="Enter Your Name" class="form" id="name">
(Same for all of the components)

Note- For Gender the 'name" for male and female are same.
<label for="gender"></label> Gender: 
<input type="radio" name="gender">Male 
<input type="radio" name="gender" class="form" id="gender">Female

Step-4:- Now create the submit,reset or any other button with input tag.
<input type="submit" value="Submit Now" id="submit">
 <input type="reset" id="reset">

Step-5:- Your web page of form is ready.

Here is the full coding of Forms in HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai+2|
Bree+Serif&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="1.css">
    <title>forms</title>
</head>
<body>
    <form action="backend.php" class="form">
        <label for="name"></label> Name: <input type="text"
placeholder="Enter Your Name" class="form" id="name"><br><br>
        <label for="email"></label> Email: <input type="text" name="My Email"
placeholder="Enter Your E-mail" class="form" id="email"><br><br>
        <label for="phoneno."></label> Phone No. <input type="number"
placeholder="Enter Your Phone No." class="form" id="phoneno."><br><br>
        <label for="date"></label> Date: <input type="date" class="form"
id="date"><br><br>
        <label for="gender"></label> Gender:
<input type="radio" name="gender">Male
<input type="radio" name="gender" class="form" id="gender">Female <br><br>
        <label for="bio"></label> Write about Yourself- <br>
        <textarea name="Write about Yourself" id="bio" cols="30" rows="10"
class="form" ></textarea><br><br>
        <label for="car"></label> 
        <select name="car" id="car">
            <option value="car">Swift</option>
            <option value="car">Renault</option>
            <option value="car">Lamborghini</option>
            <option value="car">Ferrari</option>
            <option value="car" selected>Alto</option>
        </select><br><br>

        <input type="submit" value="Submit Now" id="submit">
        <input type="reset" id="reset">

    </form>
</body>
</html>

I make it in Visual Studio. You can make it in any software. But, Visual Studio is very much better and it's size is very  low of something 52 Mb. So you can download it and program like a  proffesional coder.

Here is the link of Visual Studio

Post a Comment

0 Comments