$2.38

How to arrange HTML registration form labels and input fields next to each other in the center of a web page?

Ask a question+
0

<!DOCTYPE html>

<html>
<head>
<title>Form</title>
</head>
<body>
<h1 >Survey Form</h1>
<form name="survey-form" id="survey-form">
<table >
<tr>
<td> Name:</td>
<td><input type="text" name="name" id="name" placeholder="Enter your name" required></td>
</tr>
<tr>
<td>
Email:</td>
<td><input type="Email" name="email" id="email" placeholder="Enter your Email" required></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="number" name="age" id="age" placeholder="Age" min="1" max="60" required>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td name="role" id="role">Which option best describes your current role?</td>
<td>
<select>
<option value="Student">Student</option>
<option value="Developer">Developer</option>
<option value="Designer">Designer</option>
</select>
</td>
</tr>
<tr>
<td name="recommend" id="recommend">
How likely you would recommend a friend?</td>
<td>
<input type="radio" name="radio" value="Definitely" >Definitely<br>
<input type="radio" name="radio" value="Maybe" >Maybe<br>
<input type="radio" name="radio" value="Not sure" >Not sure
</td>
</tr>
<tr>
<td name="like" id="like">What do you like most in</td>
<td>
<select>
<option>Select an option</option>
</select>
</td>
</tr>
<tr>
<td name="improve" id="improve">Things that should be improved in the future<br>(Check all that apply):</td>
<td>
<input type="checkbox" name="check1" value="Front-end Projects">Front-end Projects<br>
<input type="checkbox" name="check2" value="Back-end Projects">Back-end Projects<br>
<input type="checkbox" name="check3" value="Data Visualization">Data Visualization
</td>
</tr>
</table>
</form>
</body>
</html>
</body>
</html>

add comment

2 Answers

0

<!DOCTYPE html>

<html>
<head>
<title>Page Title</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 {
color : #000000;
text-align : center;
font-family: “SIMPSON”;
}
form {
width: 340px;
margin: 0 auto;
}
</style>
</head>
<body>

<h1>Registration Form</h1>
<form >
<table>
<tr>
<td>Name :</td> <td><input type="text" name="name"></td><br>
</tr>
<tr>
<td>Email :</td> <td><input type="text" name="email"></td><br>
</tr>
<tr>
<td>Password :</td> <td><input type="password" name="pwd"></td><br>
</tr>
<tr>
<td>Confirm Password :</td> <td><input type="password" name="cpwd"><br>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>

Abikananda 50
add comment
0

To position the elements in the center of a webpage, you can use

text-align:center;

and

margin: 0px auto;

The pixel count can be whatever you want, but the important part is the auto. I put this rule for all elements, but if you wanted to have it only for the form, you could change the CSS very easily.

Anyways, here is the finished product. If you’d like to make the page even more styled, you can tinker with the CSS more and change the font, add colors, etc, but this is a basic example for your problem.

<!DOCTYPE html>

<html>

<head>
    <title>Form</title>

</head>
<style type='text/css'>
    * {
        text-align: center;
        margin: 0px auto;
    }
</style>

<body>
    <h1>Survey Form</h1>
    <form name="survey-form" id="survey-form">
        <table>
            <tr>
                <td> Name:</td>
                <td><input type="text" name="name" id="name" placeholder="Enter your name" required></td>
            </tr>
            <tr>
                <td> Email:</td>
                <td><input type="Email" name="email" id="email" placeholder="Enter your Email" required></td>
            </tr>
            <tr>
                <td>Age:</td>
                <td><input type="number" name="age" id="age" placeholder="Age" min="1" max="60" required>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td name="role" id="role">Which option best describes your current role?</td>
                <td>
                    <select>
<option value="Student">Student</option>
<option value="Developer">Developer</option>
<option value="Designer">Designer</option>
</select>
                </td>
            </tr>
            <tr>
                <td name="recommend" id="recommend"> How likely you would recommend a friend?</td>
                <td>
                    <input type="radio" name="radio" value="Definitely">Definitely<br>
                    <input type="radio" name="radio" value="Maybe">Maybe<br>
                    <input type="radio" name="radio" value="Not sure">Not sure
                </td>
            </tr>
            <tr>
                <td name="like" id="like">What do you like most in</td>
                <td>
                    <select>
<option>Select an option</option>
</select>
                </td>
            </tr>
            <tr>
                <td name="improve" id="improve">Things that should be improved in the future<br>(Check all that apply):</td>
                <td>
                    <input type="checkbox" name="check1" value="Front-end Projects">Front-end Projects<br>
                    <input type="checkbox" name="check2" value="Back-end Projects">Back-end Projects<br>
                    <input type="checkbox" name="check3" value="Data Visualization">Data Visualization
                </td>
            </tr>
        </table>
    </form>
</body>

</html>
</body>

</html>
ghastovastex 0
add comment

Your Answer