HTML form 1

on


HTML
    

<!doctype html>
<html>

<head>
    <style>
        input, select, option {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        /* CSS */
        .button-10 {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 6px 14px;
            font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
            border-radius: 6px;
            border: none;
            color: #fff;
            background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
            background-origin: border-box;
            box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }

        .button-10:focus {
            box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
            outline: 0;
        }
    </style>
    <script type="text/javascript">
        function showDetails() {
            var name = document.getElementById("myname").value;
            var dob = document.getElementById("dob").value;
            var gender = document.getElementById("gender").value;
            var marks = document.getElementById("marks").value;

            var details = "Name: " + name + "<br>" +
                          "Date of Birth: " + dob + "<br>" +
                          "Gender: " + gender + "<br>" +
                          "Marks: " + marks;

            document.getElementById("display_details").innerHTML = details;
        }
    </script>
    <title>Mera div</title>
</head>

<body>
    <h1>Students information form</h1>
    <form>
        <label for="myname">Name:</label><br>
        <input type="text" id="myname" name="myname" value="Rohan Singh"><br>
        <label for="dob">Date Of Birth:</label><br>
        <input type="date" id="dob" name="dob" placeholder="date"><br>
        <label for="gender">Gender</label><br>
        <select id="gender" name="gender">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select><br>
        <label for="marks">Marks <sup style="color: red;">*</sup> </label><br>
        <input type="text" id="marks" name="marks" placeholder="100" required><br>
        <input class="button-10" type="button" value="Submit" onclick="showDetails()">
    </form>

    <div id="display_details"></div>
</body>

</html>

Comments

Post a Comment