#content{
display:flex;
justify-content:center;
height:500px;
width:100%;
}
#title {
display:block;
}
#name {
display:block;
}
#email {
display:block;
}
#number {
display:block;
}
<body>
<div id="content">
<div id="title"><p>This is a survey form.</p></div>
<div id="description"><p>It would be nice if you could fill this information about addiction.</p></div>
<form id="survey-form">
<label id="name-label" for="name">Name:</label><input id="name" type="text" name="name" placeholder="Enter your name" required>
<label id="email-label" for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="Enter your email">
<label id="number-label" for="age">Enter your age:</label>
<input id="number" type="number" name="age" min="18" max="55" placeholder="Enter your age">
<h4>What are you currently addicted to?</h4>
<select id="dropdown" name="items">
<option value="alcohol">Alcohol</option>
<option value="smoking">Smoking</option>
<option value="gaming">Gaming</option>
<option value="other">Other</option>
</select>
<p>For how long you've been addited?</p>
<label><input type="radio" name="1month" id="1month"> >1 Month</label>
<label><input type="radio" name="6months" > >6 Months</label>
<label><input type="radio" name="12months" > >12 Months</label><br>
How many people do you know that are addicted as well?
<input type="checkbox" value="none">None
<input type="checkbox" value="few">Few (1-5)
<input type="checkbox" value="tons">A lot (over 5)
<p>If there's anything else you would like to point out feel free to do it.</p>
<textarea name="feedback" cols="30" rows="10"></textarea>
<input id="submit" type="submit" name="submit" value="Submit your information">
</div>
</form>
</body>
What makes this first and second paragraphs on the page display on the left side?
I've covered everything in div container, but right now as you can see it floats to the left side for some reason.
I would like it to be centered just like the rest of the stuff.
Is using flexbox is a bad option here or something?
#content{
display:grid;
justify-content:center;
height:500px;
width:100%;
}
#title {
display:block;
}
#name {
display:block;
}
#email {
display:block;
}
#number {
display:block;
}
input#submit{
display:block;
}
<body>
<div id="content">
<div id="title"><p>This is a survey form.</p></div>
<div id="description"><p>It would be nice if you could fill this information about addiction.</p></div>
<form id="survey-form">
<label id="name-label" for="name">Name:</label><input id="name" type="text" name="name" placeholder="Enter your name" required>
<label id="email-label" for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="Enter your email">
<label id="number-label" for="age">Enter your age:</label>
<input id="number" type="number" name="age" min="18" max="55" placeholder="Enter your age">
<h4>What are you currently addicted to?</h4>
<select id="dropdown" name="items">
<option value="alcohol">Alcohol</option>
<option value="smoking">Smoking</option>
<option value="gaming">Gaming</option>
<option value="other">Other</option>
</select>
<p>For how long you've been addited?</p>
<label><input type="radio" name="1month" id="1month"> >1 Month</label>
<label><input type="radio" name="6months" > >6 Months</label>
<label><input type="radio" name="12months" > >12 Months</label><br>
How many people do you know that are addicted as well?
<input type="checkbox" value="none">None
<input type="checkbox" value="few">Few (1-5)
<input type="checkbox" value="tons">A lot (over 5)
<p>If there's anything else you would like to point out feel free to do it.</p>
<textarea name="feedback" cols="30" rows="10"></textarea>
<input id="submit" type="submit" name="submit" value="Submit your information">
</div>
</form>
</body>
I guess this can help you achieve what you are looking for. You can replace your CSS code with the below snippet.
#content{
text-align:center;
height:500px;
width:100%;
}
#title {
display:block;
}
#name {
display:block;
margin:0 auto;
}
#email {
display:block;
margin:0 auto;
}
#number {
display:block;
margin:0 auto;
}
Related
I'm just learning how forms, inputs, and fieldsets are working, so I'm trying to make replicate the image above with my own code. So far, I have been able to figure out most of it, but I don't know how to properly put the button in line with the bottom of the third div. I tried a span tag with vertical-align: bottom, but that did not work. Also, I tried to make a div and use vertical-align bottom, which didn't work either. I think I just have a poor understanding of vertical-align, so if you could help it would be greatly appreciated.
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div style="width: 250px; float: left;">Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div style="width: 250px; float: left;"> Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div style="float: left;">Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button>
</fieldset>
</form>
</body>
3 issues:
1: you were missing a " on your body tag
2: when you use float:left you take the element out of the flow of the dom. In this case it's better to use display:inline-block
3: add display:block, margin-left: your a tag
NOTE: your form looks pretty good.
a{
display:inline-block;
margin-left:10px;
}
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div style="width: 250px; float: left;">Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div style="width: 250px; float: left;"> Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div style="display:inline-block;">Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button>
</fieldset>
</form>
</body>
But a better way is to use flex:
#container{
display:flex;
justify-content:space-around;
align-items:bottom;
align-items:flex-end;
}
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div id='container'>
<div >Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div > Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div> Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button> </div>
</fieldset>
</form>
</body>
You should use label tags here for all your field label.
Each radio button list should also bee in it's own fieldset
Also don't use tags like br or elements like for spacing, user margin or padding instead.
Let's now encapsulate the radio buttons and the labels in a label tag. That will help up align the link. Don't use a button in a link, it's invalid HTML and can result in odd behavior. Instead, style the link appropriately, I'd keep it looking like a link as it is an actual link to an external site opening in a new tab.
body {
background-color: #EEEEEE
}
.flex {
display:flex;
}
label.wide {
padding-right: 1em;
}
label {
white-space:nowrap;
padding-bottom:0.5em;
display:inline-block;
}
fieldset fieldset {
border: none;
padding-bottom:0;
}
#paymentShippingFields fieldset label {
display: block;
padding-bottom:0;
}
#paymentShippingFields fieldset {
border:none;
width:33%;
}
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
<fieldset id="nameField">
<label class="wide">First Name: <input type="text" name="first" placeholder="Joey" size="25"></label>
<label>Last Name: <input type="text" name="last" placeholder="Shmoey" size="25"></label>
</fieldset>
<fieldset id="addressField">
<label>Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30"></label>
<label>State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2"></label>
<label>City: <input type="text" name="city" placeholder="York"></label>
<label>Zip: <input type="text" name="zip" placeholder="17402" maxlength="5" size="8"></label>
</fieldset>
</fieldset>
<fieldset style="width: 750px;" id="paymentShippingFields">
<legend>Payment and Shipping</legend>
<div class="flex">
<fieldset>
<legend>Payment:</legend>
<label><input type="radio" name="payment" value="Visa">Visa</label>
<label><input type="radio" name="payment" value="MasterCard">MasterCard</label>
<label><input type="radio" name="payment" value="Paypal">Paypal</label>
</fieldset>
<fieldset>
<legend>Shipping:</legend>
<label><input type="radio" name="shipping" value="Priority $7.99">Priority %7.99</label>
<label><input type="radio" name="shipping" value="Standard $3.99">Standard $3.99</label>
<label><input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</label>
</fieldset>
<fieldset>
<legend>Discounts:</legend>
<label><input type="checkbox" name="discounts" value="AAA">AAA</label>
<label><input type="checkbox" name="discounts" value="AARP">AARP</label>
<label>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member
Join Now!
</label>
</fieldset>
</div>
</fieldset>
</form>
Hi,
How do I align the input field such that they start on the same vertical line? Is there a CSS method I can use instead of manually editing each input field?
This is the html code:
<form id="survey-form">
<div id="form-group">
<label for="name" id="name-label"> Name: </label>
<input type="text" id="name" name="name" placeholder="full name" required></input><br>
</div>
<div id="form-group">
<label for="email" id="email-label"> Email: </label>
<input type="email" id="email" name="email" placeholder="validated email" required></input><br>
</div>
<div id="form-group">
<label for="number" id="number-label"> Contact: </label>
<input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number"></input><br>
</div>
</form>
For CSS, I currently only have:
input {
margin-bottom: 15px;
width: 10%;
}
I was wondering how I can code it in CSS such that the text input fields align? For example, if I use padding the text fields will still not aligned as the length of the label differs.
Firstly, you don't need to close your input as </input>.
Also, in the last input, you forgot your <div id="form-group">.
Now, the idea to make all the input align is simply to make all your labels as an inline-block element with a specific width. That way, it will push out all the input and align them after the width ends.
input {
margin-bottom: 15px;
width: 10%;
}
#form-group label {
display: inline-block;
width: 60px;
}
<form id="survey-form">
<div id="form-group">
<label for="name" id="name-label"> Name: </label>
<input type="text" id="name" name="name" placeholder="full name" required><br>
</div>
<div id="form-group">
<label for="email" id="email-label"> Email: </label>
<input type="email" id="email" name="email" placeholder="validated email" required><br>
</div>
<div id="form-group">
<label for="number" id="number-label"> Contact: </label>
<input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number">
</div>
</form>
Use flex property to align the label and input box
#form-group{
display:flex;
align-items:center;
margin-bottom:20px;
}
#form-group label{
flex:1;
flex-basis:20%;
max-width:20%;
}
#form-group input {
flex:2;
flex-basis:20%;
max-width:20%;
}
Working Demo
#form-group{
display:flex;
align-items:center;
margin-bottom:20px;
}
#form-group label{
flex:1;
flex-basis:20%;
max-width:20%;
}
#form-group input {
flex:2;
flex-basis:20%;
max-width:20%;
}
<form id="survey-form">
<div id="form-group">
<label for="name" id="name-label"> Name: </label>
<input type="text" id="name" name="name" placeholder="full name" required>
</div>
<div id="form-group">
<label for="email" id="email-label"> Email: </label>
<input type="email" id="email" name="email" placeholder="validated email" required>
</div>
<div id="form-group">
<label for="number" id="number-label"> Contact: </label>
<input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number">
</div>
</form>
I'm doing one of the project for FreeCodeCamp's certificate and I'm having trouble getting the FlexBox's child elements to have equal size (height and width).
I have tried multiple use of Flex-Grow, Shrink, etc. But it seems like because of the length of the contents inside the element, they are not equally sized.
My Codepen: https://codepen.io/jyjang703/pen/PooeGxv
Basically, I want the third and 4th box of the FlexBox to be same size...
Any help would be appreciated!
<header>
<h1>Self-Happiness Survery</h1>
<h4>For anyone with regrets, griefs, and looking for changes...</h4>
</header>
<main>
<div>
<fieldset class="PersonInfo">
<form action="">
<label>First Name:</label>
<input type="text" name="First Name">
<br>
<br>
<label>Last Name:</label>
<input type="text" name="Last Name">
<br>
<br>
<label>Email:</label>
<input type="text" name="Email">
<br>
<br>
<label>Number:</label>
<input type="tel" name="Number" minlength="1" maxlength="10">
<br>
<br>
</form>
</fieldset>
<fieldset class="PersonInfo_2">
<form action="">
<label>Age:</label>
<input type="text" name="First Name">
<br>
<br>
<label>Sex:</label>
<select>
<option disabled selected value> -- select an option -- </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br>
<br>
<label>Occupation:</label>
<input type="text" name="Email">
<br>
<br>
<label>Current Martial Status:</label>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
<br>
<br>
</form>
</fieldset>
<fieldset class="Checkbox_1">
<form action="">
<label>What is causing your inner pain?</label>
<br>
<br>
<input type="checkbox" name="Pain"> Breakup
<input type="checkbox" name="Pain"> Current Job
<input type="checkbox" name="Pain"> Friendship
<input type="checkbox" name="Pain"> Family Issue
<br>
<br>
<input type="checkbox" name="Pain"> Future
<input type="checkbox" name="Pain"> Self Confidence
<input type="checkbox" name="Pain"> Loneliness
<input type="checkbox" name="Pain"> Financial Stability
</form>
</fieldset>
<fieldset class="Checkbox_2">
<form action="">
<label>What is causing your inner pain?</label>
<br>
<br>
<input type="checkbox" name="Pain"> Breakup
<input type="checkbox" name="Pain"> Current Job
<input type="checkbox" name="Pain"> Friendship
<input type="checkbox" name="Pain"> Family Issue
<br>
<br>
<input type="checkbox" name="Pain"> Future
<input type="checkbox" name="Pain"> Self Confidence
<input type="checkbox" name="Pain"> Loneliness
<input type="checkbox" name="Pain"> Financial Stability
</form>
</fieldset>
</div>
<fieldset class="Additional_Information">
<h3>Please provide any additional information</h3>
<form action="">
<textarea rows="4" cols="50" placeholder="Additional Life Storeis Here...">
</textarea>
</form>
</fieldset>
</main>
Below is CSS:
body{
background-color: #f3e9fc;
}
header{
text-align: center;
font-size: 1.5rem;
}
div{
margin: auto;
display: flex;
justify-content: space-between;
}
label{
display: inline-block;
float: left;
width: 150px;
text-align: left; /*Change to right here if you want it close to the inputs*/
}
.Additional_Information{
text-align: center;
}
.PersonInfo,.Checkbox_1,.PersonInfo_2,.Checkbox_2
{
width:25%;
}
I added this at the end of your css in codepen which made it all the same size
Use flex-basis:0 and flex-grow:1 on the child element of flexbox.
Basis is like minimum size. Then flex-grow gives the size equally to all elements.
Isn't this what you want? 1st & 2nd fieldsets are the same size and 3rd & 4th are the same size.
fieldset {
flex-grow: 1;
}
If you want equal width for the child element, You need to set the width.
div {
width: 80%;
display: flex;
margin: 0 auto;
}
.PersonInfo,.Checkbox_1,.PersonInfo_2,.Checkbox_2 {
flex-basis: 25%;
}
Folks:
I am trying the HTML exercises to build a dating website as
https://www.coursera.org/learn/html-css-javascript/peer/biy2Z/dating-web-site-assessment
1) the labels "Email", "Mobile", and "Address" in the "Your contact information" are not in the same line as their corresponding input element. What may be the problem in the code that caused this?
2) The same issue for in the "Method to contact you: Email Whatsapp In-app chat", the "In-app chat" is put in the second line.
below is the code:
fieldset {
background:lightyellow;
border:10px solid yellow;
margin-bottom:10px;
width:720px;
}
label {
width:180px;
display:inline-block;
text-align:right;
vertical-align:top;
}
.widthclass{ width:auto; }
.rangeLow, .rangeHigh{
text-align:center;
width:40px;
display:inline-block;
vertical-align:top;
color:white;
}
.rangeLow{ background-color:red;}
.rangeHigh{background-color:blue;}
.textareaFormat{width:360px; height:50px;}
label:hover{font-size:20px}
input: hover{font-size:20px}
<FORM action="http://ihome.ust.hk/~rossiter/cgi-
bin/show_everything.php " method="post"
enctype="multipart/form-data" >
<h1>
Please Enter Your Details For Our Dating Websites!
</h1>
<fieldset>
<legend> Your face </legend>
<label for="yourimage"> Your image </label>
<input type="file" id="yourimage" name="avatar"
required>
<br>
<label for="imagePreview" > Image preview:</label><img
src="" id="preview">
</fieldset>
<fieldset>
<legend> Your General Details </legend>
<label for="tname"> Name: </label>
<input type="text" id="tname" name="tname"
placeholder="Your Full Name" required>
<br>
<label for="gender" > Gender: </label>
<input type="radio" name="malegender" id="male" required
>
<label for="male" class=widthclass> Male </label>
<input type="radio" name="femalegender" id="female"
required>
<label for="female" class=widthclass > Female </label>
<br>
<label for="age" >Age: </label>
<input type="number" id="age" name="age" required>
<br>
<label for="birthday"> Date of birth: </label> <input
type="date" name="birthday" id="birthday" required>
<br>
<label for="favoriteColor"> Favorite color: </label>
<input type="color" name="color" id="color">
<br>
<label for="whichCountry"> Which country: </label>
<select name="country">
<option></option>
<option value="noSelection"> no selection </option>
<option value="u.s." > United States </option>
<option value="france"> France </option>
<option value="germany"> Germany </option>
<option value="england"> England </option>
<option value="china"> China </option>
<option value="japan"> Japan </option>
</select>
</fieldset>
<fieldset>
<lengend>Your indicators</lengend>
<br>
<label for="height" > Height:</label>
<div class="rangeLow"> Short </div>
<input type="range" min="0" max="100" step="5"
name="height id=height" >
<div class="rangeHigh"> Tall </div>
<br>
<label for="salary" > Salary:</label>
<div class="rangeLow"> Poor </div>
<input type="range" min="0" max="100" step="5"
name="height" id=salary" >
<div class="rangeHigh"> Rich </div>
</fieldset>
<fieldset>
<lengend>Your contact information</lengend>
<br>
<label for="email" > Email: <label> <input type="email"
id="email" name="email" required>
<br>
<label for="mobile"> Mobile: </label>
<input type="tel" id="mobile" name="mobile" >
<br>
<label for="address" > Address </label>
<textarea rows="3" cols="60" id="address"
name="address"class="textareaFormat">
</textarea>
<br>
<label for="contact_method"> Method to contact you:
</label>
<input type="checkbox" name="contactmethod"
value="email" id="checkboxemail">
<label for="checkboxemail" class="widthclass"> Email
</label>
<input type="checkbox" name="contactmethod"
value="Whatsapp" >
<label for="checkboxwhatsapp" class="widthclass" >
Whatsapp </label>
<input type="checkbox" name="contactmethod"
value="inappchat" >
<label for="checkboxinappchat" class="widthclass" >
In-app chat </label>
</fieldset>
<input type="submit" value=Submit" >
</FORM>
<script
src="https://www.cse.ust.hk/~rossiter/dating_web_site.js
"></script>
You did not close label tag for email by mistake so it is open to the end of document as an inline block:
Wrong:
<label for="email" > Email: <label>
correct:
<label for="email" > Email: </label>
Your code is full of errors.
For example you have this multiple label openings...
<label for="email" > Email: <label> <input type="email"
id="email" name="email" required>
<br>
<label for="mobile"> Mobile: </label>
...and you don't close it anywhere.
Also you have something like this:
<input type="range" min="0" max="100" step="5"
name="height id=height" > <!-- it should be name="height" id="height" -->
Here is fixed code https://jsfiddle.net/3cxgb00g/
Try to use markup validators and advanced text editors which will show errors in your code.
I am creating a form and I would like all of the text boxes to line up along with having the submit button centered. These were the directions I was given:
create a label element selector to float to the left with block
display set text alignment to right assign width of 8em set an
appropriate amount of padding configure and input element and
textarea element selectors with block display of 12em bottom margin
Here is the code I have so far:
form{
float:left;
display:block;
text-align:right;
width:8em;
}
input {
display: block;
margin-bottom:1em;
}
textarea#feedback {
display: block;
margin-bottom:1em;
}
.form{
margin-left: 12em;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label>
<textarea rows="2" cols="20">
</textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
I have no idea what I am doing wrong with my CSS. I tried changing the padding and the margins but nothing worked. What am I missing from my code? Any feedback would be greatly appreciated.
Here's the working fiddle: https://jsfiddle.net/qptgsc1e/
Just some minor changes, Replace this CSS and HTML and you're good to go.
If you want to see the code changes Check it here
form{
float:left;
display:block;
width:50%;
}
input {
display: block;
margin-bottom:1em;
width: 50%;
}
input[type='submit']{
width:30%;
margin:0 auto;
}
textarea#feedback {
display: block;
margin-bottom:1em;
width:50%;
}
.submit-wrap{
width:50%;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label><br>
<textarea rows="2" id="feedback">
</textarea><br>
<div class="submit-wrap"><input type="submit" value="Apply Now"></div>
</div>
</form>
First lets start with fixing your HTML.
This line is formatted wrong.
<input type="email" name="email" id= value"" required> <br>
Needs to be
<input type="email" name="email" id="" value="" required> <br>
To be.
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
Now that we have that fixed as well as some spacing we can start on centering the submit button.
Now we will wrap the submit button with a div
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
Then all that is left is to style the div, you can do this which ever way you find best margin, text-align, etc.
.buttonHolder{ text-align: center; }
Final HTML:
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
</div>
</form>
Check if this style works for you.
form{
float:left;
display:block;
/* text-align:right; */
width:8em;
margin-left: 12em;
min-width: 180px;
}
input, textarea{
min-width: 180px;
}
label{
display: block;
}
input {
display: block;
margin-bottom:1em;
}
input[type="submit"]{
display: block;
margin: auto;
width: auto;
min-width: 50px;
}
textarea#feedback {
display: block;
margin-bottom:1em;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label>
<textarea rows="2" cols="20">
</textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
please include style in the submit button.
<input type="submit" value="Apply Now" style="margin:0 auto;">
refer : center form submit buttons html / css