Skip to content
Snippets Groups Projects
Commit 903e59f6 authored by Gustav Elmqvist's avatar Gustav Elmqvist
Browse files

user input fields aligned with css

parent 8c132bc6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
welcome.css
+ 3
− 2
View file @ 903e59f6
...@@ -2,17 +2,18 @@ ...@@ -2,17 +2,18 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 500px; margin-top: 100px;
min-width: 600px;
} }
.form-elements { .form-elements {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
margin-left: 10px; margin-left: 10px;
} }
.form-input { .form-input {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 10px;
} }
\ No newline at end of file
welcome.html
+ 33
− 20
View file @ 903e59f6
<html> <html style="background-color: antiquewhite;">
<head> <head>
<link href="welcome.css" type="text/css" rel="stylesheet"> <link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script> <script src="client.js" type="text/javascript"></script>
...@@ -11,46 +11,59 @@ ...@@ -11,46 +11,59 @@
<form> <form>
<div class="form-input"> <div class="form-input">
<label for="email">Email</label> <label for="email">Email</label>
<input type="text" id="email" name="email"> <input type="text" id="email" name="email" size="18">
</div> </div>
<div class="form-input"> <div class="form-input">
<label for="password">Password</label> <label for="password">Password</label>
<input type="text" id="password" name="password"> <input type="text" id="password" name="password" size="18">
</div> </div>
<input type="submit" value="Login"> <input type="submit" value="Login">
</form> </form>
<h2>Sign up here</h2>
<form> <form>
<h2>Sign up here</h2>
<div class="form-input"> <div class="form-input">
<label for="fname">First name</label> <label for="fname">First name</label>
<input type="text" id="fname" name="fname"><br> <input type="text" id="fname" name="fname" size="18">
</div> </div>
<div class="form-input"> <div class="form-input">
<label for="lname">Family name</label> <label for="lname">Family name</label>
<input type="text" id="lname" name="lname"><br> <input type="text" id="lname" name="lname" size="18">
</div> </div>
<div class="form-input"> <div class="form-input">
<label for="gender">Gender</label> <label for="gender">Gender</label>
<select id="gender" name="gender"> <select id="gender" name="gender" style="width:169;">
<option value="male">Male</option> <option value="male">Male</option>
<option value="female">Female</option> <option value="female">Female</option>
<option value="other">Other</option> <option value="other">Other</option>
</select><br> </select>
</div> </div>
<label for="city">City</label> <div class="form-input">
<input type="text" id="city" name="city"><br> <label for="city">City</label>
<label for="country">Country</label> <input type="text" id="city" name="city" size="18">
<input type="text" id="country" name="country"><br> </div>
<label for="email">Email</label> <div class="form-input">
<input type="text" id="email" name="email"><br> <label for="country">Country</label>
<label for="password">Password</label> <input type="text" id="country" name="country" size="18">
<input type="text" id="password" name="password"><br> </div>
<label for="password2">Repeat PSW</label> <div class="form-input">
<input type="text" id="password2" name="password2"><br> <label for="email">Email</label>
<input type="submit" value="Sign Up"> <input type="text" id="email" name="email" size="18">
</div>
<div class="form-input">
<label for="password">Password</label>
<input type="text" id="password" name="password" size="18">
</div>
<div class="form-input">
<label for="password2">Repeat PSW</label>
<input type="text" id="password2" name="password2" size="18">
</div>
<div class="form-input">
<input type="submit" value="Sign Up">
</div>
</form> </form>
</div> </div>
</div> </div>
</body> </body>
</html> </html
\ No newline at end of file >
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment