Hi guys I wanted to ask a question, I was doing the FCC survey exam and while I was adding some inputs in the second fieldsets I noticed that the page doesn't let me see it.. any advise?
body {}
label {
display: block;
margin: 0.5rem;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Whats your favourite videogame?</title>
<link rel="stylessheet" href="styles.css">
</head>
<body>
<h1 id="title"> WHATS YOUR FAVOURITE VIDEOGAME?</h1>
<p id="description"> Please fill up the survey to help find the most popular videogames </p>
<form id="survey-form">
<fieldset>
<label>Name: <input id="name" type="text" required /></label>
<label>Age (optional): <input id="age" type="number" min="10" max="120" /></label>
<label>Email: <input id="email" type="email" required /></label>
<label>What do you do for living?
<select id="job">
<option value""> (Select one) </option>
<option value"1"> Student </option>
<option value"2"> Full time job </option>
<option value"3"> Prefer not to say </option>
<option value"4"> Other </option>
</fieldset>
<fieldset>
<label>How much do you play? <input type="text">
</fieldset>
</body>
</html>
It's just because you are missing to close many elements in your code.
Morover you do not need to wrap your input in label tags, html has for attribute with label tagw which help you to link, label with correct input field. The only logic is id attribute of that input should match with the for attribute of label.
And please be careful while closing tags you are starting the tags but not closing them that's the reason your second fieldset was not appearing. and also visit this post for more knowledge.
body {}
label {
display: block;
margin: 0.5rem;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Whats your favourite videogame?</title>
<link rel="stylessheet" href="styles.css">
</head>
<body>
<h1 id="title"> WHATS YOUR FAVOURITE VIDEOGAME?</h1>
<p id="description"> Please fill up the survey to help find the most popular videogames </p>
<form id="survey-form">
<fieldset>
<label for="name">Name: </label><input id="name" type="text" required />
<label for="age">Age (optional):</label> <input id="age" type="number" min="10" max="120" />
<label for="email">Email:</label> <input id="email" type="email" required />
<label for="job">What do you do for living?</label>
<select id="job">
<option value ""> (Select one) </option>
<option value "1"> Student </option>
<option value "2"> Full time job </option>
<option value "3"> Prefer not to say </option>
<option value "4"> Other </option>
</select>
</fieldset>
<fieldset>
<label for="money">How much do you play?</label> <input id="money" type="text">
</fieldset>
</form>
</body>
</html>
Related
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> FreeCodeCamp Survey</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title"> FreeCodeCamp Survey</h1>
<p id="description"> Thanks for taking the time to help us improve!</p>
<form id="survey-form">
<div class="details">
<label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
</label>
<label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
</label>
<label for="number" id="number-label"> Number <input id="number" type="number" required min="11" max="20" placeholder="Enter Your Number">
</label>
<label for="current-role" id="current-role-label">Which option best describes your current role?<br>
<select id="dropdown" name="dropdown">
<option value="current-role">(Select Current Role)</option>
<option value="student">Student</option>
<option value="full-time-job">Full Time Job</option>
<option value="full-time-learner">Full Time Learner</option>
<option value="prefer-not-to-say">Prefer Not to Say</option>
<option value="other">Other</option>
</select>
</label>
</div>
<div class="recommend">
<label>Would you Recommend FCC.com to a friend?</label>
<label for="definitely"><input id="definitely" name="definitely" value="definitely" type="radio"> Definitely</label>
<label for="maybe"><input id="maybe" type="radio" value="maybe" name="definitely"> Maybe</label>
<label><input id="not-sure" type="radio" value="not-sure" name="definitely"> Not Sure</label>
</div>
<div class="features">
<label for="favorite-feature" id="favorite-feature-label">What is your favorite feature of freeCodeCamp? (select an option/s)</label>
<select id="dropdown" name="dropdown">
<option value="favorite-feature">(Select Favorite Feature)
</option>
<option value="challenges">Challenges</options>
<option value="projects">Projects</options>
<option value="community">Community</options>
<option value="open-source">Open Source</option>
</select>
</div>
<div class="improvements">
<label>What would you like to see improved? (check all that apply)</label>
<label for="front-end"><input type="checkbox" value="front-end" name="front-end" id="front-end">Front-end Projects</label>
<label for="back-end"><input type="checkbox" value="back-end" name="back-end" id="back-end">Back-end Projects</label>
<label><input type="checkbox" value="challenges" name="challenges" id="challenges">Challenges</label>
</div>
<div class="comment">
<label for="comments">Any Comments or Suggestions?</label>
<textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
</div>
<div>
<button type="submit" id="submit"> Submit</button>
</div>
</form>
</body>
</html>
I have tried styling using .features for example which is a class that I gave to my div but it doesn't seem to do anything. However if I use
label, input{ display:block;}
It seems to do the trick! I'm not sure if this makes sense. Anyhow, any help or guidance would be much appreciated. I'm having so much fun learning all this new stuff!
your class .features class is working. The option tags closing was wrong. Had an extra s in the end mentioned by #Nasser in the comment. Run the code below and you will get border which I have given through features class.
I think you should check stylesheets name 'styles.css' whether it's same with the css file name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> FreeCodeCamp Survey</title>
<style>
label, input{ display:block;}
.features{
border: 2px solid #fcba03;
}
</style>
</head>
<body>
<h1 id="title"> FreeCodeCamp Survey</h1>
<p id="description"> Thanks for taking the time to help us improve!</p>
<form id="survey-form">
<div class="details">
<label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
</label>
<label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
</label>
<label for="number" id="number-label"> Number <input id="number" type="number" required min="11" max="20" placeholder="Enter Your Number">
</label>
<label for="current-role" id="current-role-label">Which option best describes your current role?<br>
<select id="dropdown" name="dropdown">
<option value="current-role">(Select Current Role)</option>
<option value="student">Student</option>
<option value="full-time-job">Full Time Job</option>
<option value="full-time-learner">Full Time Learner</option>
<option value="prefer-not-to-say">Prefer Not to Say</option>
<option value="other">Other</option>
</select>
</label>
</div>
<div class="recommend">
<label>Would you Recommend FCC.com to a friend?</label>
<label for="definitely"><input id="definitely" name="definitely" value="definitely" type="radio"> Definitely</label>
<label for="maybe"><input id="maybe" type="radio" value="maybe" name="definitely"> Maybe</label>
<label><input id="not-sure" type="radio" value="not-sure" name="definitely"> Not Sure</label>
</div>
<div class="features">
<label for="favorite-feature" id="favorite-feature-label">What is your favorite feature of freeCodeCamp? (select an option/s)</label>
<select id="dropdown" name="dropdown">
<option value="favorite-feature">(Select Favorite Feature)
</option>
<option value="challenges">Challenges</option>
<option value="projects">Projects</option>
<option value="community">Community</option>
<option value="open-source">Open Source</option>
</select>
</div>
<div class="improvements">
<label>What would you like to see improved? (check all that apply)</label>
<label for="front-end"><input type="checkbox" value="front-end" name="front-end" id="front-end">Front-end Projects</label>
<label for="back-end"><input type="checkbox" value="back-end" name="back-end" id="back-end">Back-end Projects</label>
<label><input type="checkbox" value="challenges" name="challenges" id="challenges">Challenges</label>
</div>
<div class="comment">
<label for="comments">Any Comments or Suggestions?</label>
<textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
</div>
<div>
<button type="submit" id="submit"> Submit</button>
</div>
</form>
</body>
</html>
I'm new to coding just learning HTML and CSS so there is probably a simple solution I cannot see.
I have written HTML code and linked it to my CSS file in Visual Studio Code. I have test the link in the editor and it worked and I have also checked my class tags.
The weird thing is the CSS is displayed in browser if I run it in Code Pen with no problems however this is not the case in VSC.
Any ideas would be really helpful,
Following is my code blocks,
HTML
<!DOCTYPE html>
<html>
<head>
<title> Designer Form </title>
<meta charset=”utf-8”>
<link type="stylesheet" href="designerform.css">
</head>
<center> <h1>Fill out this form</h1> </center>
<body>
<form class = "all">
<!--Input for a text box-->
<form1>
<h2> 1.</h2>
<label for="Name">Name </label>
<input id="Name" type="text" name="Name">
</form1>
<!--Input for a number -->
<form2>
<h3> 2. </h2>
<label for="Age"> Age </label>
<input id="Age" type="number" name="Age">
</form2>
<!--Input for telephone-->
<form3>
<h4> 3. </h4>
<label for="telephone">Telephone</label>
<input id="telephone" type="tel" name="Telephone">
</form3>
<!--Input for email-->
<form4>
<h5> 4. </h5>
<label for="email"> Email:</label >
<input id="email" type="email" name= "Email">
</form4>
<!--Input for calender-->
<form5>
<h6> 5. </h6>
<label for="calender"> Calender</label>
<input id="calender" type="month" name= calender>
</form5>
<!-- Input for search -->
<form6>
<h7> 6. </h7>
<label for="search">search</label>
<input id="search" type="search" name="search">
</form6>
<!--Text area for longer form responses-->
<form7>
<h8> 7. </h8>
<label for="long response"> Tell me more...</label>
<textarea id="long response" name= "long response"></textarea>
</form7>
<!--Predertimed responses-->
<form8>
<h9> 8. </h9>
<label for= "Fav colours"> What is your colour?</label>
<select id= "Fav colours">
<option value="colorRed"> Red</option>
<option value="colorBlue"> Blue</option>
<option value="colorYellow"> Yellow</option>
</select>
</form8>
<!--Radio inputs-->
<input type ="submit" value="Finish">
</form>
</body>
</html>
and CSS
.all {background-color: rgb(238, 129, 238);
font-family: fantasy; }
h1 {text-align: center;
color: #FFF;
background-color: rgb(102, 155, 204); }
Thanks in advance for your time.
the problem is with your link tag stylesheet should be rel not type.
yours <link type="stylesheet" href="designerform.css">
and should be like this <link rel="stylesheet" href="designerform.css">
You have a typo in your css link. Should be rel="stylesheet", not type;
<link rel="stylesheet" href="designerform.css">
Check out the following link for proper css linkage - How to add CSS
I want to make a website which includes a questionnaire that visitors will fill in. Here is what I have:
<html>
<head>
</head>
<body>
<form method="post" action="index.php">
<label>Name:</label>
<input name="name" placeholder="Name">
<label>Email:</label>
<input name="email" type="email" placeholder="Email">
<label>Price:</label>
<select name="price" option="Free,1p - £1,£1 - £5,£5 - £10,£10 - £20,£20+"
<label>Comment:</label>
<textarea name="message" placeholder="Do you want to say anything else?"></textarea>
<input id="submit" name="submit" type="submit" value="submit">
</form>
</body>
</html>
Most of it works, I can't get the drop down to work for some reason. Can you help please?
Your <select> element is wrong. You need to have child <option>s. See here: https://www.w3schools.com/html/html_form_elements.asp
So, more like:
<select name="price">
<option value="0">Free</option>
<option value="0to1">1p - £1</option>
<option value="1to5">£1 - £5</option>
<!-- etc -->
</select>
I am a student who have just started html5 programming recently and I was requested by my teacher to create a form. However I am currently having some problems with it. The problem is that my input fields in a fieldset have to be alligned and I do not understand what is wrong with my code :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="author" content="me">
<meta name="description" content="pizza order form">
<title>Pizza order form</title>
</head>
<body>
<style>
body {
background-image: url(Grey-website-background.png);
background-repeat: repeat;
padding:200px;
}
div {
margin:auto;
width:600px;
}
#dateoforder, #email, #name, #phone, #postal code, #time {
display:inline-block;
}
form {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: italic;
color:white;
background-image: url("1494002408354-pizza-story.jpg");
border: solid 8px #7F8013;
padding:12px;
width: 700px;
/* text-align: left;
padding-bottom: 5em;
padding-left: 2em;
padding-right: 0.5em/**/
}/*margin auto sets the element to the center of the page*/
</style>
<div>
<form action="">
<h1>Pizza Order Form</h1>
Pizza Type:
<select required><!--select function allows for a html form dropdown list-->>
<option disabled value="" selected>Please select</option>
<option value="Aloha Chicken">Aloha Chicken</option>
<option value="Beef Pepperoni">Beef Pepperoni</option>
<option value="Chicken Delight">Chicken Delight</option>
<option value="Deluxe Cheese">Deluxe Cheese</option>
</select>
<label for="Quantity">Quantity</label>
<input type="number" min="1" max="4"/>
<br>
<fieldset name="Size">
<legend>Size:</legend>
<input type="radio" name="name" value="Small" ">Small
<!--radio buttons are circular buttons that look like options-->
<input type="radio" name="name" required value="Medium">Medium
<input type="radio" name="name" value="Large">Large<!--
By setting up the required attribute for
radio buttons,the user will have to select one of the radio
buttons before he can submit the form(regardless of which one has it. )-->
</fieldset>
<fieldset name="Crust">
<legend>Crust:</legend>
<input type="radio" name="name1" value="Thin" >Thin
<input type="radio" name="name1" required value="Thick">Thick
<input type="radio" name="name1" value="Deep Dish">Deep Dish
</fieldset>
<fieldset name="Toppings">
<legend>Toppings:</legend>
<input type="checkbox" name="Toppings" value="Mushrooms">Mushrooms
<input type="checkbox" name="Toppings" value="Sausage">Sausages
<input type="checkbox" name="Toppings" value="Olives">Olives
</fieldset>
<br>
Addons:
<select>
<option disabled value="Please select addons if required" selected>Please select addons if required</option>
<option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
<option value="Garlic Bread">Garlic Bread</option>
</select>
<fieldset name="Delivery details">
<legend>Delivery to:</legend>
<label for="Name">Name:</label>
<input type="text" name="name of customer" id="name">
<br><br>
<label for="Address">Address:</label>
<textarea cols="30" rows="2"></textarea>
<label for="Postal Code">Postal Code:</label>
<input type="text" pattern="[0-9]{0,6}" id="postal code"><!--
{0,6} means number of characters must be from 0-6
{.6,}means minimum of 6 but no maximum -->
<br>
<label for="Phone">Phone#:</label>
<input type="text" pattern="[6,8,9][0-9]{0,8}" id="phone"><br>
<!--pattern attribute does not support input type number-->
<br>
<label for="Email address">Email:</label>
<input type="text" placeholder="Enter email addresses" id="email">
<br><br>
<label for="Date">Date:</label>
<input type="date" min="2017-11-01" max="2017-12-31" id="dateoforder">
<!--format of date in html is yyyy-mm-dd even though in chrom browser it shows dd/mm/yyyy
but for coding must use html default format-->
<label for="TOD">Time:</label>
<input type="time" min="10:00" max="22:00" step="900" value="10:00" id="time" required />
</fieldset>
<button type="submit">
submit
</button>
<button type="reset">
reset
</button>
</form>
</div>
</body>
</html>
As you can see ,the fieldset in the "delivery to " fieldset aren't aligned and I need them to be alligned.I have read up on vertical allignment but I don't understand how to use it. Below is a link to a google drive folder of an image of my webpage form and the ideal webpage form template I need:
https://drive.google.com/open?id=0B7oJmOastgcNVWJvSHVMb0l6d00
Your best bet to get your "perfect" form would be to rebuild it as a table, which is how I guess the "perfect" one was built. Otherwise, you would most likely have to add special paddings for every single input field which would get out of hand pretty quick.
If the input fields are not aligned it is because you have your label (transparent) that are displayed before them as you can see in the picture.
You should put them on different lines and regroup them in one table:
LABEL
INPUT
LABEL
INPUT
...
or if you prefer:
LABEL INPUT
LABEL INPUT
I have fixed your code using the second way:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="author" content="me">
<meta name="description" content="pizza order form">
<title>Pizza order form</title>
</head>
<body>
<style>
body {
background-image: url(Grey-website-background.png);
background-repeat: repeat;
padding:200px;
}
div {
margin:auto;
width:600px;
}
#dateoforder, #email, #name, #phone, #postal code, #time {
display:inline-block;
}
form {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: italic;
color:black;
background-image: url("1494002408354-pizza-story.jpg");
border: solid 8px #7F8013;
padding:12px;
width: 700px;
/* text-align: left;
padding-bottom: 5em;
padding-left: 2em;
padding-right: 0.5em/**/
}/*margin auto sets the element to the center of the page*/
.wrapper{position:relative;}
.right,.left{width:50%; position:absolute;}
.right{right:0;}
.left{left:0;}
</style>
<div>
<form action="">
<h1>Pizza Order Form</h1>
Pizza Type:
<select required><!--select function allows for a html form dropdown list-->>
<option disabled value="" selected>Please select</option>
<option value="Aloha Chicken">Aloha Chicken</option>
<option value="Beef Pepperoni">Beef Pepperoni</option>
<option value="Chicken Delight">Chicken Delight</option>
<option value="Deluxe Cheese">Deluxe Cheese</option>
</select>
<label for="Quantity">Quantity</label>
<input type="number" min="1" max="4"/>
<br>
<fieldset name="Size">
<legend>Size:</legend>
<input type="radio" name="name" value="Small" ">Small
<!--radio buttons are circular buttons that look like options-->
<input type="radio" name="name" required value="Medium">Medium
<input type="radio" name="name" value="Large">Large<!--
By setting up the required attribute for
radio buttons,the user will have to select one of the radio
buttons before he can submit the form(regardless of which one has it. )-->
</fieldset>
<fieldset name="Crust">
<legend>Crust:</legend>
<input type="radio" name="name1" value="Thin" >Thin
<input type="radio" name="name1" required value="Thick">Thick
<input type="radio" name="name1" value="Deep Dish">Deep Dish
</fieldset>
<fieldset name="Toppings">
<legend>Toppings:</legend>
<input type="checkbox" name="Toppings" value="Mushrooms">Mushrooms
<input type="checkbox" name="Toppings" value="Sausage">Sausages
<input type="checkbox" name="Toppings" value="Olives">Olives
</fieldset>
<br>
Addons:
<select>
<option disabled value="Please select addons if required" selected>Please select addons if required</option>
<option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
<option value="Garlic Bread">Garlic Bread</option>
</select>
<fieldset name="Delivery details">
<legend>Delivery to:</legend>
<table>
<tr align="left">
<th><label for="Name">Name:</label> </th>
<th><input type="text" name="name of customer" id="name"></th>
</tr>
<tr align="left">
<th><label for="Address">Address:</label></th>
<th><textarea cols="30" rows="2"></textarea></th>
</tr>
<tr align="left">
<th><label for="Postal Code">Postal Code:</label></th>
<th><input type="text" pattern="[0-9]{0,6}" id="postal code"></th><!--
{0,6} means number of characters must be from 0-6
{.6,}means minimum of 6 but no maximum -->
</tr>
<tr align="left">
<th><label for="Phone">Phone#:</label></th>
<th><input type="text" pattern="[6,8,9][0-9]{0,8}" id="phone"></th>
<!--pattern attribute does not support input type number-->
<tr align="left">
<th><label for="Email address">Email:</label></th>
<th><input type="text" placeholder="Enter email addresses" id="email"></th>
</tr>
<tr align="left">
<th><label for="Date">Date:</label></th>
<th><input type="date" min="2017-11-01" max="2017-12-31" id="dateoforder"></th>
<!--format of date in html is yyyy-mm-dd even though in chrom browser it shows dd/mm/yyyy
but for coding must use html default format-->
</tr>
<tr align="left">
<th><label for="TOD">Time:</label></th>
<th><input type="time" min="10:00" max="22:00" step="900" value="10:00" id="time" required /></th>
</tr>
</table>
</fieldset>
<button type="submit">
submit
</button>
<button type="reset">
reset
</button>
</form>
</div>
</body>
</html>
This is the sample html document. The datalist tag is added for the fave input text box. But it does show up. Any ideas?
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="description" content="A simple example"/>
</head>
<body>
<form method="post" action="WorkingWithFormsChapter.html" target="_blank">
<label for="fave">Enther your favourite fruit</label>
<input name="fave" autofocus="true" list="fruitslist"/>
<br/>
<label for="name">Enter your name</label>
<input name="name" placeholder="Your name please" />
<button>Submit Vote</button>
</form>
<datalist id="fruitslist">
<option value="Tasty Apples">Apples</option>
<option value="Juicy Oranges">Juicy Oranges</option>
</datalist>
</body>
</html>
It works; the support for it in some browsers at the moment is not good however.