im trying to create a form in html css. this is the form i am trying to replicate [1]: http://i.stack.imgur.com/mITNz.png
but i cant seem to get it looking like the required format as in the picture above.
this is my html
*{
margin: 0;
padding: 0;
}
label {
display: block;
float: left;
width: 6em;
}
input, textarea {
width: 14em;
display: block;
}
input[type="radio"] {
width: 1em;
margin: .1em .2em;
}
<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" type="text/css" href="pracExam2.css">
</head>
<body>
<form action="#" method="get" >
<label>Given name</label><input type="text" name="givenName" /><br/>
<label>Family name</label><input type="text" name="familyName" /><br/>
<label>eMail</label><input type="email" name="eMail" /><br/>
<label>Address</label><textarea rows="4" name="address"></textarea><br/>
<label>Service</label>
<fieldset>
<label for="service1">Basic</label><input type="radio" name="service" id="service1" value="basic" />
<label for="service2">Professional</label><input type="radio" name="service" id="service1" value="professional" />
<label for="service3">Premium</label><input type="radio" name="service" id="service1" value="premium" />
</fieldset>
</form>
<input type="submit" value = "submit form" /><br/>
</body>
</html>
if anybody could help me get this right that would be great
You were almost there. Just add a float: left; to your radio inputs:
LIVE DEMO
input[type="radio"] {
width: 1em;
margin: .1em .2em;
float:left;
}
There are two 'extra' points to note:
All ID's should be unique
Your submit button may be more 'commonly accepted' as being nested within the form, not after it.
With those amendments changed, you should have something similar to this
*{
margin: 0;
padding: 0;
}
label {
display: block;
float: left;
width: 6em;
}
input, textarea {
width: 14em;
display: block;
}
input[type="radio"] {
width: 1em;
margin: .1em .2em;
}
<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" type="text/css" href="pracExam2.css">
</head>
<body>
<form action="#" method="get" >
<label>Given name</label><input type="text" name="givenName" /><br/>
<label>Family name</label><input type="text" name="familyName" /><br/>
<label>eMail</label><input type="email" name="eMail" /><br/>
<label>Address</label><textarea rows="4" name="address"></textarea><br/>
<label>Service</label>
<fieldset>
<label for="service1">Basic</label><input type="radio" name="service" id="service1" value="basic" />
<label for="service2">Professional</label><input type="radio" name="service" id="service1" value="professional" />
<label for="service3">Premium</label><input type="radio" name="service" id="service1" value="premium" />
</fieldset>
</form>
<input type="submit" value = "submit form" /><br/>
</body>
</html>
Why don't you try http://getbootsrtap.com and i thing this example will help you
http://getbootstrap.com/css/#forms-horizontal
I've changed the width of the label inside the fieldset and added float:left label and input elements.
* {
margin: 0;
padding: 0;
}
label {
display: block;
float: left;
width: 6em;
}
input,
textarea {
width: 14em;
display: block;
}
input[type="radio"] {
width: 1em;
margin: .1em .2em;
}
form {
border: solid grey;
}
fieldset label,
fieldset input {
float: left;
}
fieldset label {
width: auto;
}
<form action="#" method="get">
<label>Given name</label>
<input type="text" name="givenName" />
<br/>
<label>Family name</label>
<input type="text" name="familyName" />
<br/>
<label>eMail</label>
<input type="email" name="eMail" />
<br/>
<label>Address</label>
<textarea rows="4" name="address"></textarea>
<br/>
<label>Service</label>
<fieldset>
<label for="service1">Basic</label>
<input type="radio" name="service" id="service1" value="basic" />
<label for="service2">Professional</label>
<input type="radio" name="service" id="service1" value="professional" />
<label for="service3">Premium</label>
<input type="radio" name="service" id="service1" value="premium" />
</fieldset>
</form>
<input type="submit" value="submit form" />
<br/>
You need to have block elements
html
<form action="#" method="get" >
<label>Given name</label><input type="text" name="givenName" /><br/>
<label>Family name</label><input type="text" name="familyName" /><br/>
<label>eMail</label><input type="email" name="eMail" /><br/>
<label>Address</label><textarea rows="4" name="address"></textarea><br/>
<label>Service</label>
<fieldset style="display:inline-block;">
<div class="fieldset_blocks"><label for="service1">Basic<input type="radio" name="service" id="service1" value="basic" /></label></div>
<div class="fieldset_blocks"><label for="service2">Professional<input type="radio" name="service" id="service1" value="professional" /></label></div>
<div class="fieldset_blocks"><label for="service3">Premium<input type="radio" name="service" id="service1" value="premium" /></label></div>
</fieldset>
</form>
<input type="submit" value = "submit form" /><br/>
css
*{
margin: 0;
padding: 0;
}
label {
display: block;
float: left;
padding:5px 10px;
}
input, textarea {
width: 14em;
display: block;
}
input[type="radio"] {
width: 1em;
margin: .1em .2em;
}
form {
border: solid grey;
display:inline-block;
}
.fieldset_blocks{
display:inline-block;
}
.fieldset_blocks label,.fieldset_blocks input{
display:inline-block;
}
Check this fiddle
http://jsfiddle.net/8kj177et/1/
Try this CSS.
It has the proper aligments as per the reference image
*{
margin: 0px;
padding: 0px;
}
label {
display: block;
float: left;
width: 6em;
text-align:right;
margin-right:10px;
}
input[type="text"], input[type="email"], textarea {
width: 80%;
display: block;
}
input[type="radio"] {
width: 1em;
margin: .2em .1em;
float:left;
}
form {
border: solid grey;
padding:10px;
}
Check this DEMO
Try this Out I have add some css and html codes.
*{
margin: 0;
padding: 0;
}
label {
display: block;
float: left;
width: 6em;
}
input, textarea
{
width: 14em;
display: block;
}
input[type="radio"]
{
width: 1em;
margin: .1em .2em;
float: left;
}
form
{
border: solid grey;
width: 350px;
padding-top: 10px;
padding-left: 10px;
}
HTML code
<html>
<head>
<link rel="stylesheet" type="text/css" href="pracExam2.css">
</head>
<body>
<form action="#" method="get" >
<label>Given name</label><input type="text" name="givenName" /><br/>
<label>Family name</label><input type="text" name="familyName" /><br/>
<label>eMail</label><input type="email" name="eMail" /><br/>
<label>Address</label><textarea rows="4" name="address"></textarea><br/>
<label>Service</label>
<fieldset style="width: 232px;">
<label style="width:35px" for="service1">Basic</label><input type="radio" name="service" id="service1" value="basic" />
<label style="width:80px" for="service2">Professional</label><input type="radio" name="service" id="service1" value="professional" />
<label style="width:60px" for="service3">Premium</label><input type="radio" name="service" id="service1" value="premium" />
</fieldset>
<div style="text-align: center;padding-top: 10px;">
<input type="submit" style="display: inline-block;" value = "submit form" /></div>
<br/>
</form>
</body>
</html>
Related
I'm working on a hotel reservation webpage, and having trouble aligning the input/select fields. For example, my current code shows the first name and the last name in two different lines, but I want to have them all together. This is my form looks like with my code:
first name
last name
address 1
address 2
city
state
zip
And below is how I wanted it to be:
first name last name <<----
address 1
address 2
city state <<----
zip
From my research I was able to do similarly by using display: inline-block, so I tried using it in my code as below, but it does not change anything. What am I doing wrong here?
#mainContainer {
width: 1139px;
display: flex;
justify-content: center;
padding: 0;
margin: auto;
text-align: center;
}
#formContainer {
max-width: 1000px;
width: 100%;
height: 100%;
margin-top: 110px;
background-color: white;
}
#contact {
padding-top: 25px;
}
#customerInformationForm {
width:50%;
float:left;
margin-bottom: 50px
}
#contact input {
width: 70%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact select {
width: 70%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input [class="customerFullName"] {
display: inline-block;
width: 50%;
}
<div id="mainContainer">
<div id="formContainer">
<form id="contact" action="" method="post">
<div id="customerInformationForm">
<input class="customerFullName" placeholder="First name" type="text">
<input class="customerFullName" placeholder="Last name" type="text">
<input placeholder="Address 1" type="text">
<input placeholder="Address 2" type="text">
<input placeholder="City" type="text">
<select id="state" name="state">
<option value="State" selected>State</option>
<option value="Alabama">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
</select>
<input placeholder="ZIP" type="text">
</div>
</form>
</div>
</div>
You made a little mess about all those "width" declarations. You made your div #customerInformationForm "width" for a half of a parent (50% width). Then you inserted in that div your first, last name etc. inputs, and set up their width for 70% of the parent, which actually made no possible, to insert two inputs side by side (70% + 70% equals more than 100%, so it displays in new line). Reconsider using all these width declarations, below you have a little start how you may handle it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#mainContainer {
width: 1139px;
display: flex;
justify-content: center;
padding: 0;
margin: auto;
text-align: center;
}
#formContainer {
max-width: 1000px;
width: 100%;
height: 100%;
margin-top: 110px;
background-color: white;
}
#contact {
padding-top: 25px;
}
#customerInformationForm {
/* width:50%;*/
float:left;
margin-bottom: 50px;
background-color: red;
}
#contact input {
width: 35%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input:nth-child(3),
#contact input:nth-child(4) {
width: 70%;
}
#contact select {
width: 35%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact #customerInformationForm input .customerFullName {
display: inline-block;
width: 70%;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="formContainer">
<form id="contact" action="" method="post">
<div id="customerInformationForm">
<input class="customerFullName" placeholder="First name" type="text">
<input class="customerFullName" placeholder="Last name" type="text">
<input placeholder="Address 1" type="text">
<input placeholder="Address 2" type="text">
<input placeholder="City" type="text">
<select id="state" name="state">
<option value="State" selected>State</option>
<option value="Alabama">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
</select>
<input placeholder="ZIP" type="text">
</div>
</form>
</div>
</div>
</body>
</html>
Use semantic tags like fieldset to you advantage here to group elements. I also champion the proper use of label, not hijacking the place holder attribute for that purpose.
The example below could use a bit of style tidying but it will give you the idea.
It uses flexbox to achieve inlining the field where required.
#customerInformationForm {
padding-top:2em;
}
fieldset {
border: none;
position:relative;
}
#customerInformationForm fieldset {
padding-left:0;
}
#customerInformationForm {
background-color:#DDD;
}
#customerInformationForm > fieldset {
background-color:#EEE;
padding: 1.5em 1em;
margin-bottom: 0.5em;
border-radius:5px;
}
input, select {
width:100%;
}
legend {
font-weight: bold;
padding-left: 0;
position:absolute;
top:0;
}
label {
display: block;
}
.flex {
display:flex;
align-items:stretch;
}
.flex > .form_group {
flex:1;
}
.form_group {
margin-right:10px;
}
<div id="mainContainer">
<div id="formContainer">
<form id="contact" action="" method="post">
<fieldset id="customerInformationForm">
<legend>Customer Information</legend>
<fieldset class="customer_name flex">
<legend>Customer Name</legend>
<div class="form_group">
<label for="firstName">First Name</label>
<input class="customerFullName" id="firstName" placeholder="Eg: John" type="text">
</div>
<div class="form_group">
<label for="lastName">Last Name</label>
<input class="customerFullName" placeholder="Eg: Smith" id="lastName" type="text">
</div>
</fieldset>
<fieldset class="address">
<legend>Address</legend>
<div class="form_group">
<label for="address1">Address 1</label>
<input type="text" id="address1">
</div>
<div class="form_group">
<label for="address1">Address 2</label>
<input type="text">
</div>
<fieldset class="city_state flex">
<div class="form_group">
<label for="City">City</label>
<input type="text" id="City">
</div>
<div class="form_group">
<label for="state">State</label>
<select id="state" name="state">
<option value="" selected></option>
<option value="Alabama">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
</select>
</div>
</fieldset>
<div class="form_group">
<label for="zip">Zip</label>
<input id="zip" type="text">
</div>
</fieldset>
</fieldset>
</form>
</div>
</div>
I have created a registration form using html and css. Earlier there were only 7 input fields and since I wanted 2 more input fields I added 2 more textboxes to enter the username and password.
When it had only seven textboxes it showed me the submit button. but after I added the additional textboxes it wont show me the registration button although I scroll down
here I didn't include the php code since it doesn't have any problem
here's the css code:
#charset "utf-8";
/* CSS Document */
#charset "utf-8";
/* CSS Document */
body{
margin: 0;
padding: 0;
min-height: 100%;
background-color: white;
background-position: center;
background-blend-mode: soft-light;
font-family: sans-serif;
}
#form1
{
overflow: scroll;
}
.regform
{
width: 500px;
height: 880px;
overflow-y:scroll;
background:rgba(0,0,0,0.5);
color: #fff;
padding: 0px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 70px 30px;
}
.regform p
{
margin: 0;
padding: 0;
font-weight: bold;
}
.regform input[type="text"],[type="datetime-local"] ,[type="date"],[type="Password"]{
width: 100%;
margin-bottom: 20px;
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
#regbt{
width: 85%;
position: fixed;
border: none;
outline: none;
height: 40px;
background: blue;
color: #fff;
font-size: 18px;
border-radius: 20px;
margin:9px 0;
}
#regbt:hover{
cursor: pointer;
background: #ffc107;
color: #000;
}
here's the html code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style6.css" type="text/css">
<meta charset="utf-8">
<title>Registration </title>
</head>
<body>
<!-- regform -->
<form id="form1" name="form1" method="POST">
<div class="regform">
<p>
<label for="textfield">Student ID:</label></p>
<input type="text" name="stuid" class="textfield" readonly><br><!-- Auto incremented in table-->
<p><label for="textfield">Student Name:</label></p>
<input type="text" name="stuname" class="textfield" placeholder="Enter your full name" required><br>
<p><label for="textfield">User Name:</label></p>
<input type="text" name="stu_uname" class="textfield" placeholder="Enter your username" required><br>
<p><label for="textfield">Password:</label></p>
<input type="Password" name="stu_pass" class="textfield" placeholder="Enter your Password" required><br>
<p><label for="textfield">NIC or Passport No.:</label></p>
<input type="text" name="stunic" class="textfield" placeholder="enter your NIC number or Passport number" required><br>
<p> <label for="textfield">Address:</label></p>
<input type="text" name="stuaddress" class="textfield" placeholder="enter your address" required><br>
<table width="200">
<tr>
<td><p>Gender:</p><label>
<input type="radio" name="Gender" value="radio" id="Gender_0" required>
Male</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="Gender" value="radio" id="Gender_1" required>
Female</label></td>
</tr>
</table>
<br>
<p><label> D.O.B:</label></p>
<input type="date" name="dob" required><br>
<p> <label for="textfield">Registration Number:</label></p>
<input type="text" name="sturegno" class="textfield" required ><br>
<!-- Auto incremented in the table-->
<p><label>Registration Date:</label></p><input name="regdate" type="datetime-local" required><br>
<input type="submit" name="regbt1" id="regbt" value="Register">
</div>
</form>
</body>
</html>
please ignore any errors that I have done when posting the question.
You are setting a fixed height size for your .regform
update it as following:
.regform {
width: 500px;
height: 100%;
[...]
}
#charset "utf-8";
/* CSS Document */
#charset "utf-8";
/* CSS Document */
body{
margin: 0;
padding: 0;
min-height: 100%;
background-color: white;
background-position: center;
background-blend-mode: soft-light;
font-family: sans-serif;
}
#form1
{
overflow: scroll;
}
.regform
{
width: 500px;
height: 100%;
overflow-y:scroll;
background:rgba(0,0,0,0.5);
color: #fff;
padding: 0px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 70px 30px;
}
.regform p
{
margin: 0;
padding: 0;
font-weight: bold;
}
.regform input[type="text"],[type="datetime-local"] ,[type="date"],[type="Password"]{
width: 100%;
margin-bottom: 20px;
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
#regbt{
width: 85%;
position: fixed;
border: none;
outline: none;
height: 40px;
background: blue;
color: #fff;
font-size: 18px;
border-radius: 20px;
margin:9px 0;
}
#regbt:hover{
cursor: pointer;
background: #ffc107;
color: #000;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style6.css" type="text/css">
<meta charset="utf-8">
<title>Registration </title>
</head>
<body>
<!-- regform -->
<form id="form1" name="form1" method="POST">
<div class="regform">
<p>
<label for="textfield">Student ID:</label></p>
<input type="text" name="stuid" class="textfield" readonly><br><!-- Auto incremented in table-->
<p><label for="textfield">Student Name:</label></p>
<input type="text" name="stuname" class="textfield" placeholder="Enter your full name" required><br>
<p><label for="textfield">User Name:</label></p>
<input type="text" name="stu_uname" class="textfield" placeholder="Enter your username" required><br>
<p><label for="textfield">Password:</label></p>
<input type="Password" name="stu_pass" class="textfield" placeholder="Enter your Password" required><br>
<p><label for="textfield">NIC or Passport No.:</label></p>
<input type="text" name="stunic" class="textfield" placeholder="enter your NIC number or Passport number" required><br>
<p> <label for="textfield">Address:</label></p>
<input type="text" name="stuaddress" class="textfield" placeholder="enter your address" required><br>
<table width="200">
<tr>
<td><p>Gender:</p><label>
<input type="radio" name="Gender" value="radio" id="Gender_0" required>
Male</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="Gender" value="radio" id="Gender_1" required>
Female</label></td>
</tr>
</table>
<br>
<p><label> D.O.B:</label></p>
<input type="date" name="dob" required><br>
<p> <label for="textfield">Registration Number:</label></p>
<input type="text" name="sturegno" class="textfield" required ><br>
<!-- Auto incremented in the table-->
<p><label>Registration Date:</label></p><input name="regdate" type="datetime-local" required><br>
<input type="submit" name="regbt1" id="regbt" value="Register">
</div>
</form>
</body>
</html>
I am having no trouble seeing your register button, are you sure it is not a cache problem? Maybe press ctrl + f5.
My CSS file was working perfectly fine last night and I was able to apply any changes I want, but now I can't even change the background color or font of any elements in my HTML file. Please help me. I tried to make the body color black for example, but nothing changed.
enter image description here
HTML & CSS
body {
margin: 60px;
margin-left: 150px;
margin-right: 150px;
font-family: Avantgarde, sans-serif;
background: black;
}
header {
background: gray;
font-size: 2.0em;
padding: 10px;
color: white;
text-align: center;
}
h2 {
font-size: 20px;
}
#container {
box-sizing: border-box;
width: 100%;
border: 0.5px solid gray;
padding: 25px;
clear: both;
display: table;
}
input {
font-size: 15px;
display: inline-block;
clear: left;
width: 150px;
text-align: left;
}
label {
font-size: 15px;
display: inline-block;
clear: left;
width: 150px;
text-align: left;
}
#submit {
font-size: 20px;
text-align: center;
display: inline-block;
clear: left;
width: 200px;
}
#login {
border: 1px solid gray;
padding: 20px;
padding-left: 40px;
}
#register {
border: 1px solid gray;
padding: 20px;
padding-left: 40px;
}
<header>
Employee Management System
</header>
<div id="container">
<div id="login">
<form action="login.php" method="POST">
<h2>Fill out this form if you have an existing account</h2>
<label>Username:</label>
<input type="text" id="username" name="username" placeholder="your username" required/>
<br>
<label>Password:</label>
<input type="text" id="password" name="password" placeholder="password" required/>
<br>
<label></label>
<input type="submit" value="Login" />
</form>
</div>
<br>
<div id="register">
<form method="POST" action="register.php" class="form" onsubmit="return submitform(this)" id="myForm">
<h2>Register Account</h2>
<label>First Name:</label>
<input type="text" id="fname" name="fname" placeholder="your first name" required/>
<br>
<label>Last Name:</label>
<input type="text" id="lname" name="lname" placeholder="your last name" required/>
<br>
<label>Username:</label>
<input type="text" id="username" name="username" placeholder="your username" required/>
<br>
<label>Password:</label>
<input type="text" id="password" name="password" placeholder="password" required/>
<br>
<label>Confirm Password:</label>
<input type="text" id="cpassword" name="cpassword" placeholder="password" required/>
<br>
<br>
<span class="error"></span>
<br>
<br>
<label></label>
<input type="submit" value="Register" class="submit" />
</form>
</div>
</div>
Head section looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Employee Management System</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
An obvious answer, would be to clear your cache or just do CTRL+F5. If you're not too sure on how to clear your cache, have a look at this site.
http://www.refreshyourcache.com/en/home
I am trying to align the button radios on my page and it seems that one of the buttons (Gender) is highly indented. The radio for the M (Gender) is at the center and the other button is at the far right. I've been changing the values in css but it doesn't align. How do I align them? Anyone help? My css is combined and I got most of help here from SO.
form {
width: 80%;
margin: 0 auto;
}
label,
input {
display: inline-block;
}
label {
width: 30%;
}
label + input {
width: 30%;
margin: 0 10% 0 1%;
}
.label-align input[type="checkbox"] {
cursor: pointer;
margin-top: 6px;
}
.label-align span {
margin: 0 0 10px 10px;
display: block;
}
.left {
float: left;
}
<div id="register" class="container">
<form action="" method="post">
<label>*First Name:</label>
<input type="text">
<br>
<label>*Last Name:</label>
<input type="text">
<br>
<label>*Birth Date:</label>
<input type="text">
<br>
<label>*Gender:</label>
<input type="radio" name="gender" value="male" checked>M
<input type="radio" name="gender" value="female" checked>F
<br>
<label>*Email:</label>
<input type="text">
<br>
<label>*Password:</label>
<input type="text">
<br>
<label>*Re-enter Password:</label>
<input type="text">
<br>
<button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span>
</button>
</form>
</div>
This is happening because of this the following style.
label + input {
width: 30%;
margin: 0 10% 0 1%;
}
All inputs following a label will gain a width of 30%.
The reason only the first radio-button is affected by this is because it's the one that's adjacent to the gender label.
You could change this rule so it only affects input boxes for example.
label + input[type='text'] {
width: 30%;
margin: 0 10% 0 1%;
}
Snippet example
form {
width: 80%;
margin: 0 auto;
}
label,
input {
display: inline-block;
}
label {
width: 30%;
}
label + input[type='text'] {
width: 30%;
margin: 0 10% 0 1%;
}
.label-align input[type="checkbox"] {
cursor: pointer;
margin-top: 6px;
}
.label-align span {
margin: 0 0 10px 10px;
display: block;
}
.left {
float: left;
}
<div id="register" class="container">
<form action="" method="post">
<label>*First Name:</label>
<input type="text">
<br>
<label>*Last Name:</label>
<input type="text">
<br>
<label>*Birth Date:</label>
<input type="text">
<br>
<label>*Gender:</label>
<input type="radio" name="gender" value="male" checked>M
<input type="radio" name="gender" value="female" checked>F
<br>
<label>*Email:</label>
<input type="text">
<br>
<label>*Password:</label>
<input type="text">
<br>
<label>*Re-enter Password:</label>
<input type="text">
<br>
<button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span>
</button>
</form>
</div>
label + input {
width: 30%;
margin: 0 10% 0 1%;
}
Remove width :30%;
Please add following css,
input[type="radio"] {
margin: 4px 4px 4px 4px;
width: 2%;
}
In your code add one class like this
<input type="radio" name="gender" class="gender" value="male" checked>M
<input type="radio" name="gender" value="female" checked>F<br>
in your css style property add this class gender property like this.
.gender{
width: 0px !important;
margin: 0px 0px 0px 4px !important;
}
I have the home.html page where I have a menu. On clicking the link I want the addnew.html page to load into the part of the code. I get the page but it is shown in an small section.....
Home.html
<!DOCTYPE html>
<head>
<title>Contact Manager</title>
<link rel="stylesheet" type="text/css" href="Style1.css" />
<script>
function Load_addnew()
{
document.getElementById("load_here").innerHTML='<object type="text/html" data="Addnew.html"></object>'
}
</script>
</head>
<body>
<div id="main">
<div id="logo">
<h1><center>Contact Manager</center></h1>
</div>
<div id="menu">
<ul>
<li>ADD NEW CONTACT</li>
<li>EDIT A CONTACT</li>
<li>DELETE CONTACT</li>
<li>SEARCH CONTACTS</li>
<li>LIST OF CONTACTS</li>
</div>
<div id="load_here"></div>
</div>
</body>
</html>
Style1.css
#main
{
background-repeat: repeat;
}
#logo a, #menu a
{
text-decoration: none;
}
#menu ul
{
line-height: 1.5em;
font-size: x-large;
float: left;
list-style: none;
}
#load_here
{
}
#logo
{
background-color:
}
#menu
{
margin: 0px auto;
left: 0px;
right: 0px;
}
AddNew.html
<!DOCTYPE HTML>
<html>
<head>
<title>Add Contact</title>
<link rel="stylesheet" type="text/css" href="addnew.css"></link>
</head>
<body>
<div id="main">
<ul id="errors">
<li id="info">Please recheck your form and Submit again: </li>
</ul>
<p id="success">Details Saved Successfully!!</p>
<div id="form1">
<form action="" method="" id="add_new">
<label for="Fname">First Name <span class="required">*</span>:</label>
<input type="text" id="First_Name" name="FirstName" value="" pattern="[A-Z a-z]" required="required" autofocus="autofocus"/>
<label for="Mname">Middle Name :</label>
<input type="text" id="Middle_Name" name="MiddleName" pattern="[A-Z a-z]" value=""/>
<label for="Lname">Last Name <span class="required">*</span>:</label>
<input type="text" id="Last_Name" name="LastName" value="" pattern="[A-Z a-z]" required="required"/>
<label for="dob">Date of Birth <span class="required">*</span>:</label>
<input type="date" id="DOB" name="dob" value="" required="required"/>
<label for="Phone1">Phone 1 <span class="required">*</span>:</label>
<input type="text" id="contactHome" name="Phone1" value="" required="required"/>
<label for="Phone2">Phone 2:</label>
<input type="text" id="contactOffice" name="Phone2" value=""/>
<label for="email">Email <span class="required">*</span>:</label>
<input type="email" id="email" name="Email" value="" placeholder="username#example.com" required="required"/>
<label for="Address">Address Line 1 <span class="required">*</span>:</label>
<input type="text" id="address" name="Address" required="required"/>
<label for="Address">Address Line 2:</label>
<input type="text" id="address1" name="Address1"/>
<label for="city">City <span class="required">*</span>:</label>
<input id="city" name="City" required="required" value=""/>
<label for="state">State <span class="required">*</span>:</label>
<input id="state" name="State" required="required" value=""/>
<label for="country">Country<span class="required">*</span>:</label>
<input id="country" name="Country" required="required" value=""/>
<label for="zip">PIN<span class="required">*</span>:</label>
<input id="zip" name="Zip" required="required" value=""/>
<input type="Submit" value="Submit" id="submit-button"/>
<input type="Reset" value="Reset" id="reset_button"/>
<p id="required-desc"><span class="required">*</span> indicates a required field</p>
</form>
</div>
</div>
</body>
</html>
addnew.css
#main
{
width: 465px;
padding: 20px;
margin: 0px auto;
border: 6px solid #8fb5c1;
border-radius: 15px;
position: absolute;
background-repeat: repeat;
left: 0px;
right: 0px;
}
#main input, #main select, #main textarea, #main label
{
font-size: 15px;
margin-bottom: 2px;
}
#main input, #main select, #main textarea
{
width: 450px;
border: 1px solid #cee1e8;
margin-bottom: 20px;
padding: 4px;
}
#main input:focus, #main select:focus, #main textarea:focus
{
border: 1px solid #afcdd8;
background-color: #ebf2f4;
}
#main textarea
{
height: 80px;
resize: none;
}
#main label
{
display: block;
}
#main .required
{
font-weight: bold;
color: #f00;
}
#main #submit-button, #main #reset_button
{
width: 100px;
background-color:#333;
color:#FFF;
border:none;
display:block;
float:right;
margin-bottom:0px;
margin-right:6px;
background-color:#8FB5C1;
}
#main #submit-button:hover, #main #reset_button :hover
{
background-color: #A6CFDD;
}
#main #submit-button:active, #main #reset_button:active
{
position:relative;
top:1px;
}
#main #loading
{
width:32px;
height:32px;
display:block;
position:absolute;
right:130px;
bottom:16px;
display:none;
}
#errors
{
border: solid 1px #e58e8e;
padding: 10px;
margin: block;
width: 437px;
border-radius: 8px;
background: #ffe6e6 no-repeat 405px center;
display: none;
}
#errors li
{
padding: 2px;
list-style: none;
}
#errors li:before
{
content: '-';
}
#errors #info
{
font-weight: bold;
}
#errors #info:before
{
content: '';
}
#success
{
border: solid 1px #83d186;
padding: 25px 10px;
margin: 25px 0px;
display: block;
width: 437px;
border-radius: 8px;
background: #d3edd3 no-repeat 405px center;
font-weight: bold;
display: none;
}
#errors.visible, #success.visible
{
display: block;
}
#form1 #req-field-desc
{
font-style: italic;
}
Easy enough if you set a width and height.
#load_here object
{
width: 100%;
height: 500px;
}
The problem you'll run into is that there is proportional sizing for this. You'd have to specify both a width and a height, or it will default width: 300px; and height: 150px;. So, if you set width: 100%; but don't set height, it'll render the height at 150px, and vice versa.
I hope this helps. ^^