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.
Related
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>
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
The data sent is not being submitted using through url. When I click submit, the url does not have the key value pairs.Note: I have not named anything in action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Assignment1.19</title>
</head>
<body>
<h1>Register</h1>
<form class="" action="#" method="GET">
<div class="">
<label for="hi" >First Name:</label>
<input id="hi" type="text" name="" value="" placeholder="Jane" name= "hello" required autofocus>
<label for="no">Last Name:</label>
<input id="no" type="text" name="" value="" placeholder="Doe"name= "naw" required>
<br>
</div>
<div class="">
<button type="submit" name="button">Submit</button>
</div>
</form>
</body>
</html>
You have two name attributes and no value values.
You also should have whitespace separating each attribute.
Also, your action should point to a URL that handles the request.
I have the following HTML5 code
<!DOCTYPE html>
<html>
<head>
<title>Learning Input</title>
</head>
<body>
<input type=text value="Enter your name" maxlength="10"> <br>
<input type=checkbox checked>
</body>
</html>
Which is working fine, by the way. The checkbox as expected is checked. However, just after adding one line of code to introduce a password field, this following code makes the checkbox unchecked, even tough i have marked it "checked". This does not make any sense! Am i breaking any HTML5 rule?
The code after adding password field:
<!DOCTYPE html>
<html>
<head>
<title>Learning Input</title>
</head>
<body>
<input type=text value="Enter your name" maxlength="10"> <br>
<input type=password> <br>
<input type=checkbox checked>
</body>
</html>
Help is appreciated. Thanks in advance! :)
your code is correct actually ..working on Chrome, firefox mozilla and IE
<!DOCTYPE html>
<html>
<head>
<title>Learning Input</title>
</head>
<body>
<form>
<input type=text value="Enter your name" maxlength="10"> <br>
<input type=password> <br>
<input type=checkbox checked>
</form>
</body>
</html>
The form is displayed on the browser, but when I roll my cursor over the text fields, it just doesn't take the input. How is this caused and how can I solve it?
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--> <div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div><!-->
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
</html>
You are overlaying your form with a div, that blocks the input. Remove it:
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
Your html comments are invalid
should be
<!-- <html not displayed> -->
Not
<!--> <html not displayed> <!-->
Result is the html that it appears you are trying to comment out is masking the form
Your div tag with 100% height and 100% width has covered the entire view port like a modal form, hence the area beneath it has become non-clickable. Remove the height and width from tag like below:
<div style='position:absolute;z-index:0;left:0;top:0;'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div>
Your font size is probably set to zero.
Add this to your css style file:
input {
font-size: 10pt;
}
Or add the style directly on the HTML tag:
<input style="font-size: 10pt;" type="submit" value="Send Info">