I am newcomer in html code so that i have no huge knowledge about html coding.
When I use inline style, it seems to be working fine but the css code inside the head element doesn't show in the web page. The code seems fine to me. I've tried running this code in both Chrome and Firefox, but the problem persists in both of them. Please check my code & give me any advice or solution. Thanks.
fieldset: {
background: lightyellow;
border: 10px solid yellow;
margin-bottom: 10px;
width: 720px;
}
label: {
width: 180px;
}
<h1>Please Enter Your Details For Our Dating Website!</h1>
<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post">
<fieldset>
<legend>Your Face</legend>
<label for="image">Your image:</label>
<input type="file" name="image" required>
<br>
Image preview:
<img src="" id="preview">
</fieldset>
<fieldset>
<legend>Your General Details</legend>
<label for="name">Name:</label>
<input type="text" name="name" required>
<br>
<label for="gender">Gender:</label>
<input type="radio" name="gender" required>
Male
<input type="radio" name="gender" required>
Female
<br>
<label for="age">Age:</label>
<input type="number" name="age" required>
<br>
<label for="dob">Date of birth:</label>
<input type="date" name="dob">
<br>
<label for="color">Favorite color:</label>
<input type="color" name="color">
<br>
<label for="country">Which country:</label>
<select name="country">
<option value="no"></option>
<option value="en">England</option>
<option value="in">India</option>
<option value="jp">Japan</option>
<option value="sp">Spain</option>
<option value="us">USA</option>
</select>
</fieldset>
<fieldset>
<legend>Your Indicators</legend>
<label for="height">Height:</label>
Short
<input type="range" name="height" min="0" max="100">
Tall
<br>
<label for="salary">Salary:</label>
Poor
<input type="range" name="salary" min="0" max="100">
Rich
<br>
</fieldset>
<fieldset>
<legend>Your Contact Information</legend>
<label for="email">Email:</label>
<input type="email" name="email" required>
<br>
<label for="mobile">Mobile:</label>
<input type="tel" name="mobile">
<br>
<label for="address">Address:</label>
<textarea name="address"></textarea>
<br>
<label for="contact">Method to contact you:</label>
<input type="checkbox" name="contact">
Email
<input type="checkbox" name="contact">
Whatsapp
<input type="checkbox" name="contact">
In-app chat
</fieldset>
<input type="submit" name="Submit">
</form>
Remove this "colon :" from styles properties.
fieldset : {
Then others will work fine.
<!DOCTYPE html>
<html>
<head>
<title>Dating Web Site</title>
<style>
fieldset {
background: lightyellow;
border: 10px solid yellow;
margin-bottom: 10px;
width: 720px;
}
label {
width: 180px;
}
</style>
</head>
<body>
<h1>Please Enter Your Details For Our Dating Website!</h1>
<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post">
<fieldset>
<legend>Your Face</legend>
<label for="image">Your image:</label>
<input type="file" name="image" required>
<br>
Image preview:
<img src="" id="preview">
</fieldset>
<fieldset>
<legend>Your General Details</legend>
<label for="name">Name:</label>
<input type="text" name="name" required>
<br>
<label for="gender">Gender:</label>
<input type="radio" name="gender" required>
Male
<input type="radio" name="gender" required>
Female
<br>
<label for="age">Age:</label>
<input type="number" name="age" required>
<br>
<label for="dob">Date of birth:</label>
<input type="date" name="dob">
<br>
<label for="color">Favorite color:</label>
<input type="color" name="color">
<br>
<label for="country">Which country:</label>
<select name="country">
<option value="no"></option>
<option value="en">England</option>
<option value="in">India</option>
<option value="jp">Japan</option>
<option value="sp">Spain</option>
<option value="us">USA</option>
</select>
</fieldset>
<fieldset>
<legend>Your Indicators</legend>
<label for="height">Height:</label>
Short
<input type="range" name="height" min="0" max="100">
Tall
<br>
<label for="salary">Salary:</label>
Poor
<input type="range" name="salary" min="0" max="100">
Rich
<br>
</fieldset>
<fieldset>
<legend>Your Contact Information</legend>
<label for="email">Email:</label>
<input type="email" name="email" required>
<br>
<label for="mobile">Mobile:</label>
<input type="tel" name="mobile">
<br>
<label for="address">Address:</label>
<textarea name="address"></textarea>
<br>
<label for="contact">Method to contact you:</label>
<input type="checkbox" name="contact">
Email
<input type="checkbox" name="contact">
Whatsapp
<input type="checkbox" name="contact">
In-app chat
</fieldset>
<input type="submit" name="Submit">
</form>
</body>
</html>
Related
The form should not be able to submit the form unless it is filled out. And an error message should pop up.
My problem is that I can't find out how to do this with HTML, because I am not allowed to use JavaScript in this task.
My code:
<form action="https://folk.ntnu.no/anderobs/webtek/receive_form.php" method="post">
<label for="name">Real Name: </label>
<input type="text" id="name" name="name" value=""> <br>
<label for="gender">Your gender: </label>
<input type="radio" id="gender" name="gender" value="Male">
<label for="gender">Male</label>
<input type="radio" id="gender" name="gender" value="Female">
<label for="gender">Female</label> <br>
<label for="email">E-Mail: </label>
<input type="email" id="email" name="email" value=""> <br>
<label for="birthdate">Birthdate: </label>
<input type="date" id="birthdate" name="birthdate" value=""> <br>
<label for="hero">Hero name: </label>
<input type="text" id="hero" name="hero" value=""> <br>
<label for="spandex">Do you wear spandex? </label>
<input type="radio" id="spandex" name="spandex" value="">
<label for="spandex">True</label>
<input type="radio" id="spandex" name="spandex" value="">
<label for="spandex">False</label> <br>
<label for="strengt">Strengt (between 1 and 10): </label>
<input type="number" id="strengt" name="strengt" min="1" max="10"> <br>
<label for="speed">Speed (between 1 and 10): </label>
<input type="number" id="speed" name="speed" min="1" max="10"> <br>
<label for="intelligence">Intelligence (between 1 and 10): </label>
<input type="number" id="intelligence" name="intelligence" min="1" max="10"> <br>
<label for="income">Income: </label>
<input type="number" id="income" name="income" min="0"> <br>
<label for="wealth">Wealth: </label>
<input type="number" id="wealth" name="wealth" min="0"> <br>
<br>
<input type="submit" value="Submit tax form">
I would like to shift the form up to the image. However, I have tried but I still could not shift the whole form up.
Below is the html and css codes:
/* Container holding the image and the text */
.container {
position: relative;
text-align: left;
color: black;
}
/* Encounter issues here, please take a look at the second image*/
.formcontainer {
position: absolute;
top: 8px;
left: 16px;
}
<div class="container">
<img src="https://picsum.photos/1000/600.jpg" class="body">
<h2> Registration </h2>
<div class="formcontainer">
<form action>
<label for="name">Name :</label> <br>
<input type="text" name="name" value="Enter your name"></input>
<br>
<label for="age">Age :</label> <br>
<input type="number" name="age" min="1"></input>
<br>
<label for="gender">Gender :</label> <br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
<label for="membertype">Types of membership :</label> <br>
<select name="type">
<option value="OneYr">1 Year</option>
<option value="FiveYr" selected>5 Years</option>
<option value="LifeTime">Life Time</option>
</select>
<br>
<br/>
<label for="interests">Interests :</label>
<br>
<input type="checkbox" name="interest" value="Bike"> Travel<br>
<input type="checkbox" name="interest" value="Food"> Food<br>
<input type="checkbox" name="interest" value="Shopping"> Shopping<br>
<input type="checkbox" name="interest" value="Cars"> Cars<br>
</br>
<input type ="button" name="submit" value="Submit">
</form>
</div>
</div>
After I have tried using the above .formcontainer css codes:
Just add your image in .container style not using img tag.
.container{
background-image: url("../img/gym.jpg");
}
See the Snippet below:
.container{
background-image: url("https://i.stack.imgur.com/3dbsg.png");
}
<div class="container">
<img src="../img/gym.jpg" class="body">
<h2> Registration </h2>
<div class="formcontainer">
<form action>
<label for="name">Name :</label> <br>
<input type="text" name="name" value="Enter your name"></input>
<br>
<label for="age">Age :</label> <br>
<input type="number" name="age" min="1"></input>
<br>
<label for="gender">Gender :</label> <br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
<label for="membertype">Types of membership :</label> <br>
<select name="type">
<option value="OneYr">1 Year</option>
<option value="FiveYr" selected>5 Years</option>
<option value="LifeTime">Life Time</option>
</select>
<br>
<br/>
<label for="interests">Interests :</label>
<br>
<input type="checkbox" name="interest" value="Bike"> Travel<br>
<input type="checkbox" name="interest" value="Food"> Food<br>
<input type="checkbox" name="interest" value="Shopping"> Shopping<br>
<input type="checkbox" name="interest" value="Cars"> Cars<br>
</br>
<input type ="button" name="submit" value="Submit">
</form>
</div>
</div>
Not a UI expert, but adding the image as background to the parent-div should do.
.container {
background-image: url("https://i.ibb.co/xJCmfmT/test3.jpg");
position: relative;
text-align: left;
color: black;
}
You can do this in couple of ways as far as I know.
set the image as parent div (container here) background using
.container {
background-image: url(IMAGE_URL);
}
set position of formcontainer as absolute
.formcontainer {
position: absolute;
}
I'm trying to use flexbox in the following snippet.
However, the header and the div below it do not seem to get the CSS styling. If I remove the flexbox setting in the container div the header shows on top of the form div. But when I add display flex it puts the header and form div side by side.
Why does this happen? I am trying to show the header on top and form div below it and then horizontally center with justify-content: center. Thanks.
.container {
display: flex;
justify-content: center;
align-items: center;
}
header {
border: 1px solid black;
}
#form {
border: 1px solid black;
}
<div class="container">
<header>
<h1 id="title">Survey Form</h1>
<p id="description">Thank you for helping us improve by taking this survey.</p>
</header>
<div id="form">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+#.+\..+" required>
<div>
<div class="form-group">
<label id="number-label" for="number">Age (optional)</label>
<input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
<div class="form-group">
<p>What's your coding experience?</p>
<label>
<input type="radio" name="user-experience" value="noob" class="input-radio" />
Noob
</label>
<label>
<input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
Dangerous
</label>
<label>
<input type="radio" name="user-experience" value="veteran" class="input-radio" />
Veteran
</label>
</div>
<div class="form-group">
<p>What programing language do you use the most at work?</p>
<select id="dropdown" class="form-group" name="language" required>
<option disabled selected value>Select a language</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="c">C</option>
<option value="c#">C#</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
</select>
</div>
<div class="form-group">
<p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
<label>
<input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
</label>
<label>
<input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
</label>
</div>
<div class="form-group">
<p>Please provide any comments if we missed anything?</p>
<textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
<div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit</button>
<div>
</form>
</div>
</div>
You wanna use the flex-direction property. It takes four values:
row
column
row-reverse
column-reverse
You wanna edit container class to this:
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
For more information on Ordering Flex Items see the docs
Edit:
You can use the flex-flow property, which is a css-shorthand property for:
flex-direction
flex-wrap
Default behaviour for display: flex is to align items in a row. You can change this by adding flex-flow: column to align the items in a column.
.container {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column; /* added flex-flow: column here*/
}
header {
border: 1px solid black;
}
#form {
border: 1px solid black;
}
<div class="container">
<header>
<h1 id="title">Survey Form</h1>
<p id="description">Thank you for helping us improve by taking this survey.</p>
</header>
<div id="form">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+#.+\..+" required>
<div>
<div class="form-group">
<label id="number-label" for="number">Age (optional)</label>
<input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
<div class="form-group">
<p>What's your coding experience?</p>
<label>
<input type="radio" name="user-experience" value="noob" class="input-radio" />
Noob
</label>
<label>
<input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
Dangerous
</label>
<label>
<input type="radio" name="user-experience" value="veteran" class="input-radio" />
Veteran
</label>
</div>
<div class="form-group">
<p>What programing language do you use the most at work?</p>
<select id="dropdown" class="form-group" name="language" required>
<option disabled selected value>Select a language</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="c">C</option>
<option value="c#">C#</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
</select>
</div>
<div class="form-group">
<p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
<label>
<input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
</label>
<label>
<input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
</label>
</div>
<div class="form-group">
<p>Please provide any comments if we missed anything?</p>
<textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
<div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit</button>
<div>
</form>
</div>
</div>
try this it:
.container {
display: flex;
justify-content: center;
flex-direction: column;
width: fit-content;
margin: auto;
}
header {
border: 1px solid black;
}
#form {
border: 1px solid black;
}
<div class="container">
<header>
<h1 id="title">Survey Form</h1>
<p id="description">Thank you for helping us improve by taking this survey.</p>
</header>
<div id="form">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+#.+\..+" required>
<div>
<div class="form-group">
<label id="number-label" for="number">Age (optional)</label>
<input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
<div class="form-group">
<p>What's your coding experience?</p>
<label>
<input type="radio" name="user-experience" value="noob" class="input-radio" />
Noob
</label>
<label>
<input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
Dangerous
</label>
<label>
<input type="radio" name="user-experience" value="veteran" class="input-radio" />
Veteran
</label>
</div>
<div class="form-group">
<p>What programing language do you use the most at work?</p>
<select id="dropdown" class="form-group" name="language" required>
<option disabled selected value>Select a language</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="c">C</option>
<option value="c#">C#</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
</select>
</div>
<div class="form-group">
<p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
<label>
<input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
</label>
<label>
<input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
</label>
</div>
<div class="form-group">
<p>Please provide any comments if we missed anything?</p>
<textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
<div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit</button>
<div>
</form>
</div>
</div>
Use flex-flow:column to container
.container {
display: flex;
flex-flow: column;
}
Add style below to header for align content inside the header to center.
header {
align-items: center;
justify-content:center;
display:flex;
flex-flow:column;
}
Try this snippet
.container {
display: flex;
flex-flow: column;
}
header {
border: 1px solid black;
margin-bottom: 10px;
align-items: center;
justify-content:center;
display:flex;
flex-flow:column;
}
#form {
border: 1px solid black;
}
<div class="container">
<header>
<h1 id="title">Survey Form</h1>
<p id="description">Thank you for helping us improve by taking this survey.</p>
</header>
<div id="form">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+#.+\..+" required>
<div>
<div class="form-group">
<label id="number-label" for="number">Age (optional)</label>
<input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
<div class="form-group">
<p>What's your coding experience?</p>
<label>
<input type="radio" name="user-experience" value="noob" class="input-radio" />
Noob
</label>
<label>
<input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
Dangerous
</label>
<label>
<input type="radio" name="user-experience" value="veteran" class="input-radio" />
Veteran
</label>
</div>
<div class="form-group">
<p>What programing language do you use the most at work?</p>
<select id="dropdown" class="form-group" name="language" required>
<option disabled selected value>Select a language</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="c">C</option>
<option value="c#">C#</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
</select>
</div>
<div class="form-group">
<p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
<label>
<input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
</label>
<label>
<input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
</label>
</div>
<div class="form-group">
<p>Please provide any comments if we missed anything?</p>
<textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
<div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit</button>
<div>
</form>
</div>
</div>
I am still working on a project for school that is a web site for my children. I just put in a form but the fields don't seem to line up with the text boxes. I don't see what I'm doing wrong. I've searched the web and this site for answers. I believe the teacher wants the form to actually be set up within and using form tags. Any help is appreciated. Here is my HTML for my form.
<section>
<div id="salesDetails"><h2>Sales Details</h2>
<form name="checkOut" method="post" method="get" action="mailto:etw11241#aol.com";>
<div class="formRow">
<label for="contactName"><p>Contact Name</p></label>
<input autofocus autocomplete="off" name="contactName" id="contactName" type="text" size="50"
placeholder="Enter your full name." required autofocus/>
</div>
<div class="formRow">
<label for="phoneNumber"><p>Phone Number</p></label>
<input placeholder="Include area code" name="phoneNumber" id="phoneNumber" type="tel" size="50" required/>
</div>
<div class="formRow">
<label for="emailAddress"><p>Email Address</p></label>
<input name="emailAddress" id="emailAddress" type="email" size="50" required/>
</div>
<div class="formRow">
<label for="address"><p>Address</p></label>
<input name="address" id="address" type="text" size="50" required/>
</div>
<div class="formRow">
<label for="serviceSelection"><p>Service Selection</label>
<select name="serviceSelection" id="serviceSelection" multiple="multiple" required>
<option value="-1">-Select (Max 2)-</option>
<option value="1">Lawnmowing/Front Yard----00001----$10</option>
<option value="2">Lawnmowing/Backyard----00002----$10</option>
<option value="3">Lawnmowing/Whole Yard----00003----$20</option>
<option value="4">Leaf Raking/Front Yard----00004----$15</option>
<option value="5">Leaf Raking/Backyard----00005----$15</option>
<option value="6">Leaf Raking/Whole Yard----00006----$30</option>
<option value="7">Snow Shoveling/Average Driveway----00007----$20</option>
<option value="8">Snow Shoveling/Long Driveway----00008----$30</option>
</select>
</div>
<div class="formRow">
<label for="specialRequests"><p>Special Requests</p></label>
<textarea cols="40" rows="6" name="specialRequests" id="specialRequests" ></textarea>
</div>
<div class="formRow">
<label for="serviceNeededBy"><p>Service Needed By</p></label>
<input name="serviceNeededBy" id="serviceNeededBy" type="date" size="50"/>
</div>
<div class="formRow">
<input style="width:70px" type="submit" value="Submit"/>
<input style="width:70px" type="reset" value="Reset"/>
</div>
</section>
Am I missing HTML or CSS dimensions?
That's because you've displayed the fields within paragraphs which will result in linebreaks by default after the field.
Try the following HTML :
<section>
<div id="salesDetails">
<h2>Sales Details</h2>
<form name="checkOut" method="post" method="get" action="mailto:etw11241#aol.com" ;>
<div class="formRow">
<label for="contactName">
Contact Name
</label>
<input autofocus autocomplete="off" name="contactName" id="contactName" type="text" size="50" placeholder="Enter your full name." required autofocus/>
</div>
<div class="formRow">
<label for="phoneNumber">
Phone Number
</label>
<input placeholder="Include area code" name="phoneNumber" id="phoneNumber" type="tel" size="50" required/>
</div>
<div class="formRow">
<label for="emailAddress">
Email Address
</label>
<input name="emailAddress" id="emailAddress" type="email" size="50" required/>
</div>
<div class="formRow">
<label for="address">
Address
</label>
<input name="address" id="address" type="text" size="50" required/>
</div>
<div class="formRow">
<label for="serviceSelection">
Service Selection</label>
<select name="serviceSelection" id="serviceSelection" multiple="multiple" required>
<option value="-1">-Select (Max 2)-</option>
<option value="1">Lawnmowing/Front Yard----00001----$10</option>
<option value="2">Lawnmowing/Backyard----00002----$10</option>
<option value="3">Lawnmowing/Whole Yard----00003----$20</option>
<option value="4">Leaf Raking/Front Yard----00004----$15</option>
<option value="5">Leaf Raking/Backyard----00005----$15</option>
<option value="6">Leaf Raking/Whole Yard----00006----$30</option>
<option value="7">Snow Shoveling/Average Driveway----00007----$20</option>
<option value="8">Snow Shoveling/Long Driveway----00008----$30</option>
</select>
</div>
<div class="formRow">
<label for="specialRequests">
Special Requests
</label>
<textarea cols="40" rows="6" name="specialRequests" id="specialRequests"></textarea>
</div>
<div class="formRow">
<label for="serviceNeededBy">
Service Needed By
</label>
<input name="serviceNeededBy" id="serviceNeededBy" type="date" size="50" />
</div>
<div class="formRow">
<input style="width:70px" type="submit" value="Submit" />
<input style="width:70px" type="reset" value="Reset" />
</div>
</section>
I usually do something like this :
<form action="">
<div class="control">
<div class="label">
<label for="something">Something</label>
</div>
<div class="input">
<input type="text" name="something">
</div>
</div>
</form>
The notion is that we wrap each label/input in its own container, and provide two containing elements for the actual form fields themselves. Let the label float to the side, and provide an equal amount of margin-left on the input container.
.control .label{
float:left;
width:80px;
display:inline;
}
.control .input{
margin-left:100px;
}
This makes for a very tidy layout, containing all types of different form fields; a very dependable and easily controllable pattern.
A bit like so :
https://jsfiddle.net/64jnaqak/
I was just wondering what shall I do to align the text area in a form so they can be all at the same level.
my code is:
<form method="post" action="process.php" id="contactForm">
<fieldset id="field1">
<div class="subscribe">
<label for="fName">First name:</label>
<input type="text" name="fName" id="fName" required/>
</div>
<div class="subscribe">
<label for="lName">Last name:</label>
<input type="text" name="lName" id="lName" required/>
</div>
<div class="subscribe">
<label for="title">Title:</label>
<select name="title" id="title" required>
<option value="1"> Mr. </option>
<option value="2"> Ms. </option>
<option value="3"> Mrs. </option>
<option value="4"> Miss. </option>
<option value="5"> Master. </option>
</select>
</div>
<div class="subscribe">
<label for="hNumber">Health Authority Number:</label>
<input type="text" name="number" id="hNumber" required/>
</div>
<div class="subscribe">
<label for="email">Email address: </label>
<input type="email" name="email" id="email" required/>
</div>
<div class="subscribe">
<label for="fNr">Telephone number:</label>
<input type="text" name="fNr" id="fNr" required/>
</div>
<div class="button">
<input id="btn1" type="button" value="Submit">
</div>
</fieldsed>
</form>
This CSS code won't do it:
#contactForm {
width: 46em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
#contactForm label {
padding: 0.5em;
display: inline;
float: center;
}
Thank you for your answers. I know is noobies stuff but it will help me at the minute to get the answer rather then find it out by studying.
Try that:
use inline-block instead;
set a fixed width
delete your padding
I think that's it
#contactForm label {
display: inline-block;
width: 200px;
text-align: left;
}