Have some difficulties in placing a form in a box. It does not turn out well. i am curious if anyone has a suggestion. This is a form that is going to be placed at the side of the a dynamic text. I am also curious how to move the box text one step to the right since the text is one letter longer than the one above. Nothing fancy but the alignment and form box is crucial. Illustration
A picture of the form i want :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="action_page.html">
<form>
<h1>Text<h1></br></br>
Name: <input type="text" name="Name" placeholder="Name hier.."></br>
Epost: <input type="text" name="Epost" placeholder="Epost hier.."></br>
<input type="submit" value="Senden">
</form>
</body>
</html>
Try using it and see if it helps:-
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">Name:</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="Name" placeholder="Name hier..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="fname">Epost:</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="epost" placeholder="Epost hier..">
</div>
</div>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
I Have added CSS also u can see the respective element and add to you code to get the desired effect.Please upvote if it helps.
Please try something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<h1>Text</h1>
<div class="input-wrapper">
<label for="name">Name</label>
<input type="text" name="Name" placeholder="Name" id="name">
</div>
<div class="input-wrapper">
<label for="email">Email</label>
<input type="text" name="Epost" placeholder="Email" id="email">
</div>
<button type="submit">Send</button>
</form>
</body>
</html>
After adding some CSS for styling, this can be the result:
https://codepen.io/anon/pen/QobvQL?editors=1100
Related
I'm trying to make the text input fields take at least 90% of the form div (the blue area) and remain the position centered.
The form div is a grid within its parent grid, the main container. It is in the CSS for the form's div that I set its contents to be centered, however the input fields shrink as a result.
Can anyone suggest any solutions?
I thought of getting rid of any properties for centering the content and just increasing the width of the input fields to 100%, while increasing the padding of the form div.
But I'm really stubborn to keep the width of the input lower than 100%.
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: auto;
background: silver;
padding: 20px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"content"
"footer";
justify-items: center;
}
#header {
text-align: center;
grid-area: header;
}
#survey-form {
width: 70%;
background: blue;
padding: 30px;
grid-area: content;
display: grid;
}
.form-group {
justify-self: center;
}
.form-group label{
display: block;
}
.form-group input[type="text"] {
width: 90%;
height: 30px;
border-radius: 10px;
}
<!DOCTYPE html>
<htmL>
<head>
<title>Survey Page</title>
<link rel="stylesheet" type="text/css" href="surveystyle.css">
</head>
<body>
<div id="container">
<header id="header">
<h1 id="title">Take this survey</h1>
<p id="description">Seriously just take it now while I think about the caption.</p>
</header>
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name">
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your email">
</div>
<div class="form-group">
<label id="number-label" for="number">Age</label>
<input type="text" name="age" id="number" class="form-control" placeholder="Enter your age">
</div>
<footer>
</footer>
</form>
</div>
</body>
</htmL>
Hopefully this is what your looking for.
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: auto;
background: silver;
padding: 20px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"content"
"footer";
justify-items: center;
}
#header {
text-align: center;
grid-area: header;
}
#survey-form {
width: 70%;
background: blue;
padding: 30px;
grid-area: content;
display: grid;
}
.form-group {
margin:auto;
width:90%;
}
.form-group label{
display: block;
color:white;
}
.form-group input[type="text"],.form-group input[type="email"] {
width: 100%;
height: 30px;
margin:auto;
border-radius: 10px;
}
<!DOCTYPE html>
<htmL>
<head>
<title>Survey Page</title>
<link rel="stylesheet" type="text/css" href="surveystyle.css">
</head>
<body>
<div id="container">
<header id="header">
<h1 id="title">Take this survey</h1>
<p id="description">Seriously just take it now while I think about the caption.</p>
</header>
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name">
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your email">
</div>
<div class="form-group">
<label id="number-label" for="number">Age</label>
<input type="text" name="age" id="number" class="form-control" placeholder="Enter your age">
</div>
<footer>
</footer>
</form>
</div>
I am super newb in terms of CSS, and I can't understand why my form is having issues with the colors. I wrapped a form inside a div, but still I can see background color from a body.
I tried everything, including coloring every single div separately. It is not a good practice, and not everything was coloured anyways, so I need a better solution.
Could you help me sort the colors out? Thank you so much.
Code below:
* {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
box-sizing: border-box;
color: lightblue;
}
#upper-text {
margin-bottom: 1em;
margin-top: 1em;
text-align: center;
}
.form_style {
margin-bottom: 1em;
background-color: white;
}
#container {
display: block;
height: 450px;
max-width: 350px;
margin: 0 auto;
box-shadow: 0 0 3px grey;
background-color: white;
}
#form_wrap {
margin-top: 60px;
display: block;
position: relative;
background-color: white;
}
#space {
margin-bottom: 10em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="./js.js"></script>
<title>Form</title>
</head>
<body>
<div id="space"></div>
<div id="container">
<div id="upper-text">
<h1>I dare you to Sign Up</h1>
<p>It's free * </p>
</div>
<div id="form_wrap">
<div class="form_style">
<label>First Name</label><br>
<input type="text" placeholder="Filip">
</div>
<div class="form_style">
<label>Last Name</label><br>
<input type="text" placeholder="Nakrętka">
</div>
<div class="form_style">
<label>Email</label><br>
<input type="email" placeholder="filipnak#piesek.pl">
</div>
<div class="form_style">
<label>Email Again</label><br>
<input name="email" type="text" id="confemail" placeholder="filipnak#piesek.pl">
</div>
<div class="form_style">
<label>Password</label><br>
<input name="password" type="text" id="pass">
</div>
<div class="form_style">
<div id="btn">
<button type="submit">Submit</button>
</div>
</div>
</div>
</div>
</body>
</html>
How do I align my text boxes in html? I have tried everything. The age box should start at the same location as Name and Email and it should be the same size as those two boxes. Please help if you can. I made the width of each input text box the same to ensure its the same size and tried to have the text boxes start at the same location. Thanks!
#Title{
text-align: center;
}
#description{
text-align: center;
}
body{
background-color: #7FFFD4;
}
#Survey-form{
background-color: f0f0f0;
text-align: center;
}
.nameageemail
{
clear: both;
margin: right;
margin:0px auto;
}
#Name{
text-align: left;
width: 200;
height: 25;
display:inline-block;
margin-right:30px;
}
#Email{
text-align: left;
width: 200;
height: 25;
display:inline-block;
margin-right:30px;
}
#Age{
text-align: left;
width: 200;
height: 25;
display:inline-block;
margin-right:30px;
}
<html>
<head>
<title>Survey Form </title>
<!-- Survey Form. -->
<link href="SurveyForm.css" rel=stylesheet>
</head>
<body>
<h1 id="Title"> Survey Form </h1>
<form id="Survey-form">
<p id="description">Let us know how we can improve freeCodeCamp </p>
<div class="nameageemail">
<p> <label>Name:</label>
<input type="text" name="Name" id="Name" placeholder="Enter your name"> </p>
<label>Email:</label>
<input type="email" name="Email" id="Email" placeholder="Enter your email"><br>
<p><label> Age:</label>
<input type="number" min = "18" max="110" name="Age" id="Age" placeholder="Age"></p>
</div>
</form>
</body>
</html>
You can use a table-based display values to layout your form.
Also, some values were missing units and a color was missing the #.
body > * {
text-align: center;
}
body {
background-color: #7FFFD4;
}
.survey-form {
display: block;
}
.survey-form > div {
display: inline-block;
background-color: #f0f0f0;
text-align: initial;
padding: 8px;
}
.survey-form > div > p {
display: table-row;
}
.survey-form > div > p > * {
display: table-cell;
margin: 8px;
}
.survey-form input {
text-align: left;
width: 200px !important;
height: 25px;
display: inline-block;
margin-right: 30px;
padding: 1px 8px;
}
.instructions {
display: initial !important;
}
<html>
<head>
<title>Survey Form </title>
<!-- Survey Form. -->
<!-- REMOVED FOR SNIPPET
<link href="SurveyForm.css" rel=stylesheet>
-->
</head>
<body>
<h1> Survey Form </h1>
<form class="survey-form" action="">
<div>
<p class="instructions">
Let us know how we can improve freeCodeCamp
</p>
<p>
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" placeholder="Enter your name">
</p>
<p>
<label for="Email">Email:</label>
<input type="email" name="Email" id="Email" placeholder="Enter your email">
</p>
<p>
<label for="Name">Age:</label>
<input type="number" min="18" max="110" name="Age" id="Age" placeholder="Age">
</p>
</div>
</form>
</body>
</html>
Hey, so I'm trying to build a movie review site which uses a database (I'm using PouchDB) and I want to style my admin/add a review page so that the inputs and labels are all aligned in a certain way. I keep adjusting widths, padding and margins but I just cant seem to get them to align. Can someone teach me how to align them the way i want them to be please?
This is how I want them to look:
body {
margin: 0;
font-family: georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: green;
width: 80%;
padding: 20px;
}
label {
padding: 6px;
text-align: center;
background: red;
}
.form {
display: flex;
text-align: center;
flex-direction: column;
}
input {
margin: 10px;
width: 40%;
background-color: yellow;
padding: 8px;
border: 2px;
}
<div class="newFilm">
<h2 id='formTitle'>Create new review</h2>
<div class="form">
<form>
<label for="title">Title:</label><input type="text" id="title">
<label for="genre">Genre:</label><input type="text" id="genre">
<label for="image">Image:</label><input type="text" id="image">
<label for="rating">Rating:</label><input type="number" id="rating">
<label for="synopsis">Synopsis:</label><input type="text" id="synopsis">
<label for="trailer">Trailer:</label><input type="text" id="trailer">
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</form>
</div>
</div>
you can use either flex or grid or both. I've used both just as an example. you could also use only grid and nest a grid within a grid.
body {
margin: 0;
font-family: georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
background-color: green;
max-width: 100%;
padding: 10%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 30px;
}
#formTitle {
grid-column: 1/3;
}
#modifyFilmButton {
grid-column: 2/3;
width: 50%;
justify-self: end;
}
.left {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
.right {
display: flex;
flex-direction: column;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>temp</title>
<link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div class="newFilm">
<h2 id="formTitle">Create new review</h2>
<div class="left">
<label for="title">Title:</label><input type="text" id="title" />
<label for="image">Image:</label><input type="text" id="image" />
<label for="trailer">Trailer:</label><input type="text" id="trailer" /> <input type="hidden" id="id" />
<label for="rating">Rating:</label><input type="number" id="rating" />
</div>
<div class="right">
<label for="genre">Genre:</label><input type="text" id="genre" />
<label for="synopsis">Synopsis:</label><input type="text" id="synopsis" />
</div>
<button id="modifyFilmButton">Post review!</button>
</div>
<script src="temp.js"></script>
</body>
</html>
Modified your html a little to add some structure.
I would not recommend using this code, look into bootstrap tables, or something of that nature. It will look better, and be a more scaleable solution.
.newFilm {
background-color: red;
padding: 20px;
border-radius: 20px;
}
textarea,
input,
label {
display: block
}
textarea,
input {
width: 200px;
}
.form {
width: 100%;
}
.left,
.right {
width: 49%;
display: inline-block;
vertical-align: top;
}
<div class="newFilm">
<h2 id='formTitle'>Create new review</h2>
<div class="form">
<form>
<div class="left">
<label for="title">Title:</label>
<input type="text" id="title">
<label for="genre">Genre:</label>
<input type="text" id="genre">
<label for="image">Image:</label>
<input type="text" id="image">
<label for="rating">Rating:</label>
<input type="number" id="rating">
</div>
<div class="right">
<label for="synopsis">Synopsis:</label>
<input type="text" id="synopsis">
<label for="trailer">Trailer:</label>
<textarea id="trailer" rows="5"></textarea>
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</div>
</form>
</div>
</div>
Responsive solution:
.myForm {
background-color: red;
padding: 20px;
border-radius: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid myForm">
<div class="row">
<div class="col-lg"><h1>Create New Review</h1></div>
</div>
<form>
<div class="row">
<div class="col-md"> <!-- left column -->
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Genre</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Image</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Rating</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md"> <!-- right column -->
<div class="form-group">
<label>Synopsis</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Trailer</label>
<textarea class="form-control"></textarea>
</div>
<input class="btn btn-primary" type="submit" value="Submit" disabled>
</div>
</div>
</form>
</div>
Adjust the left/right columns to have your desired effect.
See: https://getbootstrap.com/docs/4.1/layout/grid/
Well there are couple ways to do that.
My best option would be to have one big div that would hold two smaller divs.
Then give those two divs width of 50% each - i have used grid for that.
After that you want to make sure that label and input are taking full width of their container.
Like that you will achieve most of what you want. Also for Synopsis you should use textarea not input.
Here is my example on codepen.
Here is what I did
body {
margin: 0;
font-family: georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: green;
width: 80%;
padding: 20px;
}
label {
padding: 6px;
color: #fff;
display: block;
text-align: left;
}
.form {
display: flex;
text-align: center;
flex-direction: column;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea {
width: 100%;
display: block;
background-color: yellow;
padding: 8px;
border: 2px;
}
#modifyFilmButton {
float: right;
}
<div class="newFilm">
<h2 id='formTitle'>Create new review</h2>
<div class="form">
<form>
<div class="row">
<div class="col">
<label for="title">Title:</label><input type="text" id="title">
<label for="image">Image:</label><input type="text" id="image">
<label for="trailer">Trailer:</label><input type="text" id="trailer">
<label for="rating">Rating:</label><input type="number" id="rating">
</div>
<div class="col">
<label for="genre">Genre:</label><input type="text" id="genre">
<label for="synopsis">Synopsis:</label>
<textarea rows="9" id="synopsis"></textarea>
</div>
</div>
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</form>
</div>
</div>
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
How do I add 1px border to a div whose width is a percentage?
(3 answers)
Closed 4 years ago.
I'm trying to make a form, but I'm having some serious issues...
My input heights are set to 100%, and their parent is set to 30px, however, the height of the input in practice are more than 30px... so I set padding and margin to 0... still nothing.
Code:
body{
font-family: helvetica, sans-serif;
}
input{
width: 320px;
height: 100%;
padding: 0;
margin: 0;
display: inline-block;
vertical-align: top;
}
.label13{
padding: 0;
margin: 0;
width: 250px;
height:100%;
display: inline-block;
white-space: nowrap;
background-color: red;
vertical-align: top;
}
.label24{
padding: 0;
margin: 0;
width: 250px;
height:100%;
display: inline-block;
white-space: nowrap;
background-color: blue;
vertical-align: top;
}
#wrapper{
width: 600px;
}
.form-element{
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="formValidation.css" type="text/css">
<title>Form</title>
</head>
<body>
<div id="wrapper">
<div class="form-element">
<label class="label13" for="email">Email</label>
<input type="text" name="email" id="email" placeholder="e.g. yourname#gmail.com">
</div>
<div class="form-element">
<label class="label24" for="phone">Telephone</label>
<input type="text" name="phone" id="phone" placeholder="e.g. 778-333-3215">
</div>
<div class="form-element">
<label class="label13" for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-element">
<label class="label24" for="passwordConfirm">Confirm Password</label>
<input type="password" name="passwordConfirm" id="passwordConfirm">
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
I've added some color to make it easier to understand.
What you see is that the first three seem to conform to the right height, but they don't, it only appears that way because they're are vertically aligned to the top; if I set the height to 200%, you can see the text go far lower than the viewable input itself and eventually disappear.
What is causing this? I want the inputs to be the same height as the labels.
Add box-sizing: border-box; to your css.
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Otherwise, your input height is actually 100% + 2px for the border top and bottom. By using box-sizing: border-box;, you are telling it to instead include the border in the calculated height, so it never gets higher than 100%.
body{
font-family: helvetica, sans-serif;
}
input{
width: 320px;
height: 100%;
padding: 0;
margin: 0;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
.label13{
padding: 0;
margin: 0;
width: 250px;
height:100%;
display: inline-block;
white-space: nowrap;
background-color: red;
vertical-align: top;
}
.label24{
padding: 0;
margin: 0;
width: 250px;
height:100%;
display: inline-block;
white-space: nowrap;
background-color: blue;
vertical-align: top;
}
#wrapper{
width: 600px;
}
.form-element{
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="formValidation.css" type="text/css">
<title>Form</title>
</head>
<body>
<div id="wrapper">
<div class="form-element">
<label class="label13" for="email">Email</label>
<input type="text" name="email" id="email" placeholder="e.g. yourname#gmail.com">
</div>
<div class="form-element">
<label class="label24" for="phone">Telephone</label>
<input type="text" name="phone" id="phone" placeholder="e.g. 778-333-3215">
</div>
<div class="form-element">
<label class="label13" for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-element">
<label class="label24" for="passwordConfirm">Confirm Password</label>
<input type="password" name="passwordConfirm" id="passwordConfirm">
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>