HTML-Sample-Form/Form.html at master · ritikagr/HTML-Sample-Form · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!doctype html>
<html>
<head>
<title>Sample Form</title>

<style>

    body {
        background-color:cornsilk;
    }

    h1 {
        color: coral;
        text-align: center;
        text-decoration-style: wavy;
    }

    h1:hover {
        color: blue;
    }
    form {

        margin: 0 auto;
        width: 250px;
        border-radius: 5px 5px 5px 5px;
    }

    input {
        border-radius: 5px 5px 5px 5px;
    }

    span {
        text-decoration: underline;
        color: blue;
    }

</style>
</head>
<body>

    <h1>Sample Form</h1>
    <form action="form_handler.php" id="sample" method="post">

        First Name:<br>
        <input type="text" name="firstname"><br><br>

        Last Name:<br>
        <input type="text" name="lastname"><br><br>

        Username:<br>
        <input type="text" name="username"><br><br>

        Email:<br>
        <input type="email" name="email"><br><br>

        Password:<br>
        <input type="password" name="psw"><br><br>

        Gender:<br>
        <input type="radio" name="gender" value="Male">Male
        <input type="radio" name="gender" value="Female">Fenale
        <input type="radio" name="gender" value="Others">Others<br><br>

        Age:<br>
        <input type="number" name="age" min="0" max="100"><br><br>

        Date Of Birth:<br>
        <input type="date" name="dob" pattern="dd-mm=yyyy" min="01-01-1980" max="30-12-2005"><br><br>

        Favourite Color:<br>
        <input type="color" name="favcolor" ><br><br>

        Branch:<br>
        <select name="branch">
            <option value="cse">Computer Science & Engineering</option>
            <option value="me">Mechanical Engineering</option>
            <option value="ee">Electrical Engineering</option>
            <option value="ece">Electronics & Communication Engineering</option>
            <option value="mnc">Mathematics and Computing</option>
        </select><br><br>

        Telephone:<br>
        <input type="tel" name="usrtel"><br><br>

        <input type="checkbox" name="checkbox"> I agree to <span>terms & conditions</span><br><br>

        <input type="submit" name="submit" value="Submit" onclick="onSubmit()">
        <input type="reset" name="reset" value="Reset">

    </form>

    <script>
    function onSubmit()
        {
            document.getElementById("sample").innerHTML="Form Submitted Successfully....";
            document.getElementById("sample").style.marginTop= "100px";
            document.getElementById("sample").style.verticalAlign= "center";
        }
    </script>
</body>
</html>