I made a short and basic website and the title is showing in the page. I put the title inside head when i wrote it but it is inside body when i use the inspect tool on it. Screenshot of code editor and inspect tool on chrome
Code is below:
<head>
<tittle>Race registration form</tittle>
</head>
<body>
<h1>Race registration!</h1>
<form action="/Registration_form">
<p>
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name">
</p>
<p>
Select a race:
</p>
<p>
<input type="radio" id="Fun Run 5K" name="Race" value="Fun Run 5K">
<label for="Fun Run 5K">Fun Run 5K</label>
</p>
<p>
<input type="radio" id="Half Marathon" name="Race" value="Half Marathon">
<label for="Half Marathon">Half Marathon</label>
</p>
<p>
<input type="radio" id="Full Marathon" name="Race" value="Full Marathon">
<label for="Full Marathon">Full Marathon</label>
</p>
<label for="email">Email</label>
<input type="email" id="email" name="email">
<label for="password">Password</label>
<input tupe="password" id="password" name="password"> <br>
<p>
<button type="submit">Register!</button>
</p>
</form>
</body>
</html>```
You have a typo: tittle has an extra t there, and needs to be title.
Because <tittle /> is not a valid tag that belongs to head area, it's bleeding into body. Fix the typo, and it'd go away.
Related
Some websites have a greyish text written in the blanks next to the credentials required, for exampl Gmail (I'm not allowed to add pictures, sadly), however, when you click in the box, the greyish text disappears. I have the following code in HTML but I don't know whether it's possible to add that feature or not:
<html>
<head>
<title>My code</title>
</head>
<body>
<h1>Registration form</h1>
<form>
<fieldset>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email</label>
<input type="email" id="Email" name="Email"><br><br>
<label for="password">Password</label>
<input type="password" id="Password" name="Password">
</fieldset>
</form>
</body>
</html>
When I run this code, the boxes/fields appear empty and don't show the greyish text (like 'Email'). Can anyone tell me how to add that feature using HTML?
You can use placeholder attribute.
<input type="text" placeholder="hello">
Note:
You can change the styles of the placeholder using css ::placeholder pseudo element.
Edit:
If you want to hide the placeholder when focused do this:
#myInput:focus::placeholder{
color: transparent;
}
<input type="text" placeholder="hello" id="myInput">
You need to add the attribute called placeholder in html
<html>
<head>
<title>My code</title>
</head>
<body>
<h1>Registration form</h1>
<form>
<fieldset>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="First Name"><br><br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" placeholder="Last Name"><br><br>
<label for="email">Email</label>
<input type="email" id="Email" name="Email" placeholder="Email"><br><br>
<label for="password">Password</label>
<input type="password" id="Password" name="Password" placeholder="Password">
</fieldset>
</form>
</body>
</html>
I've got a simple form which I'm wanting people to join to be put onto a waiting list for my product - but it's not submitting.
My application is being hosted on localhost:3000 and runs absolutely fine. The page renders and you can fill the inputs in.
But when you click 'submit' it does nothing. I've tried doing a few different 'types' of the button, but no luck.
Here's my code:
<section class="waiting-list-section">
<div class="waiting-container">
<div class="waiting-heading">
<h2>Join our waiting list</h2>
</div>
<div class="waiting-inputs">
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</div>
</div>
</section>
Any tips? :-)
You need a form element wrapped around the input elements and the button.
<form>
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</form>
Second approach would be to add an eventListener on the button and when it is clicked, get the values from the inputs and then do whatever you want to do with that data
I have one html page (index.html) I am trying to link to another page (createprofile.html) using a button on the index page. I've tried onclick and using href, but when I click the button, and error appears on a blank white page that says Cannot GET /action_page.php?.
I've tried several ways to link these but it's simply not working...
Here is the index.html with the button I am trying to link (signupbtn).
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
`enter code here`<link rel="stylesheet" href="page.css">
</head>
<body>
<form action="action_page.php" style="border:1px solid #ccc">
<div class="container">
<h1>Welcome to Mission Connect!</h1>
<p>Please create an account.</p>
<hr>
<label for="email"><b>Email</b></label> <br>
<input type="text" placeholder="Email Address" name="email" required>
<br>
<br>
<label for="password"><b>Password</b></label> <br>
<input type="password" placeholder="New Password" name="password" required>
<br>
<br>
<label for="password"><b>Repeat Password</b></label>
<input type="password" placeholder="Re-enter New Password" name="password-repeat" required>
<p>By creating an account you agree to our Terms & Privacy. </p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<a href="createprofile.html"><button type="submit" class="signupbtn">Create My Account</button>
</a>
</div>
</div>
</form>
</body></html>
And this is the html page (createprofile.html) I'm trying to link it to.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="page.css">
<h1>Welcome to Your Mission Connect Profile. </h1>
<br>
Select Profile Picture:
<br>
<br>
<form action="/action_page.php">
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>
<br>
<br>
<form>
First Name:<br>
<input type="text" name="firstname">
<br>
<br>
Last Name:<br>
<input type="text" name="lastname">
<br>
<br>
Gender:
<br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
Location:<br>
<input type="text" name="location">
<br>
<br>
Home Congregation:<br>
<input type="text" name="homecongregation">
<br>
<br>
Status:
<br>
<input type="radio" name="status" value="Preparing" checked> Preparing (Pre-Missionary)<br>
<input type="radio" name="status" value="InTheField"> In the Field ( (Current Missionary)<br>
<input type="radio" name="status" value="Supporting"> Supporting (Missionary Supporter)<br>
<br>
<br>
Language(s):<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Location(s) of Interest:<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Duration:
<br>
<input type="radio" name="duration" value="shortterm" checked>
Short- Term<br>
<input type="radio" name="duration" value="longterm"> Long-Term<br>
<input type="radio" name="duration" value="undecided"> Undecided<br>
<br>
<br>
Why are you interested in missions?:<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Describe your past missions experience(s):<br>
<textarea name="message" rows="10" cols="70">
</textarea>
</form>
How can I make these two pages link?
your form action is /action_page.php where is your action_page.php ? just remove to form action action_page.php if you don't have any form action.
If you're using HTML:
<form action="action_page.php"
The same thing would go with JSON but I wouldn't recommend.
If you want a button with a hyperlink for <form action:
Stack Overflow
Preview:
Stack Overflow
Try using these methods.
Looking for answers for HTML5 ONLY, no JS solutions please!
I'm only just beginning to code so I don't really know what to google to get the answer to this - I've already done a few good hours trying to figure it out in HTML5 only, but what I've found has all involved javascript, or didn't fix my problem. The question is:
Is there a way in HTML5 to reset the validation value once a form has been submitted once, and failed to submit/got rejected because of a missing value on a 'required' attribute? I want to make resubmission possible after someone checks the required box if they left it unchecked before, without refreshing the page.
The form in question is below, sorry for the shitpost aspects;
<html>
<head>
<h1>Register</h1>
<img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>
<body>
<form method="link" action="https://youtu.be/eBRwu63-qfA">
<p>
<h2>Name</h2>
</p>
<label for="first">First:</label>
<input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
<label for "last">Last:</label>
<input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
<p></p>
<!--gender id-->
<p>
<h2>Gender</h2>
</p>
<label for="CM">Cis Man</label>
<input type="radio" id="CM" name="GS1">
<p></p>
<label for="TM">Trans Man</label>
<input type="radio" id="TM" name="GS1">
<p></p>
<label for="CF">Cis Woman</label>
<input type="radio" id="CW" name="GS1">
<p></p>
<label for="TF">Trans Woman</label>
<input type="radio" id="TW" name="GS1">
<p></p>
<label for="NBGF">Nonbinary/Genderfluid</label>
<input type="radio" id="NBGF" name="GS1">
<p></p>
<label for="AG">Agender</label>
<input type="radio" id="AG" name="GS1">
<p></p>
<label for="OTHER">Other</label>
<input type="text" name="OTHER" name="GS1">
<!--Email Password-->
<p>
<h2>Login Details</h2>
</p>
<label for="email">Email:</label>
<input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
<label for="password">Password:</label>
<input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
<!--Bday-->
<p>
<h2>Birthday</h2>
</p>
<label for="bday1">Which Month</label>
<select name="bday1">
<option></option>
<option>Jealousy</option>
<option>Federal Agent</option>
<option>Hell</option>
<option>April</option>
<option>Any Of The Rest</option>
</select>
<label for="bday2">The Day</label>
<select id="bday2">
<option></option>
<option>1</option>
<option>0</option>
<option>Void</option>
</select>
<label for="bday3">The Year Of THE Birth Crime</label>
<select id="bday3">
<option></option>
<option>X</option>
<option>666</option>
<option>Eternal</option>
</select>
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
</form>
</body>
</html>
The SPECIFIC part I'm having trouble with is this bit right here:
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
I'm not sure if there's something inside the rest of the form that's keeping this one part in particular from not working - the others all act as they're supposed to. If one is blank, it pops up with the custom warnings I set up, and after I fill it out, it doesn't cause me any issue anymore. The checkbox is the only one that has the persistent message popping up with the refusal to submit it again. If I check it WITHOUT submitting the form first, everything acts as it was supposed to when I do submit it.
I appreciate your help!
You have to change the oninput to onchange for input tags like this:
<html>
<head>
<h1>Register</h1>
<img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>
<body>
<form method="link" action="https://youtu.be/eBRwu63-qfA">
<p>
<h2>Name</h2>
</p>
<label for="first">First:</label>
<input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
<label for "last">Last:</label>
<input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
<p></p>
<!--gender id-->
<p>
<h2>Gender</h2>
</p>
<label for="CM">Cis Man</label>
<input type="radio" id="CM" name="GS1">
<p></p>
<label for="TM">Trans Man</label>
<input type="radio" id="TM" name="GS1">
<p></p>
<label for="CF">Cis Woman</label>
<input type="radio" id="CW" name="GS1">
<p></p>
<label for="TF">Trans Woman</label>
<input type="radio" id="TW" name="GS1">
<p></p>
<label for="NBGF">Nonbinary/Genderfluid</label>
<input type="radio" id="NBGF" name="GS1">
<p></p>
<label for="AG">Agender</label>
<input type="radio" id="AG" name="GS1">
<p></p>
<label for="OTHER">Other</label>
<input type="text" name="OTHER" name="GS1">
<!--Email Password-->
<p>
<h2>Login Details</h2>
</p>
<label for="email">Email:</label>
<input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
<label for="password">Password:</label>
<input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
<!--Bday-->
<p>
<h2>Birthday</h2>
</p>
<label for="bday1">Which Month</label>
<select name="bday1">
<option></option>
<option>Jealousy</option>
<option>Federal Agent</option>
<option>Hell</option>
<option>April</option>
<option>Any Of The Rest</option>
</select>
<label for="bday2">The Day</label>
<select id="bday2">
<option></option>
<option>1</option>
<option>0</option>
<option>Void</option>
</select>
<label for="bday3">The Year Of THE Birth Crime</label>
<select id="bday3">
<option></option>
<option>X</option>
<option>666</option>
<option>Eternal</option>
</select>
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')"
onchange="setCustomValidity('')"
updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
</form>
</body>
</html>
I have done textareas before but this one is just killing me. The text area is showing the html code and is not css'ed properly. So in the actual window I get the code for the textarea's element and it shows the rest of my code in it as well, instead of rendering it. Without the textarea tag everything works peachy.
<article>
<form method="POST" name="form9" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="firstName">First Name <sup>*</sup></label>
<input type="text" id="firstName" name="firstName" required />
<label for="lastName">Last Name <sup>*</sup></label>
<input type="text" id="lastName" name="lastName"/>
<label for="wrstyle">Writing Style <sup>*</sup></label>
<textarea placeholder="Please, briefly describe your writing style." type="text" id="wrstyle" name="wrstyle"</textarea>
<label for="submit" class="centerit" title="Click here to register your account">
<input type="submit" name="submit" value="Sign Up" />
</label>
<p class="notice"><sup>*</sup> denotes a required field.</p>
</form>
</article>
You don't close opening tag of the textarea (you are missing >):
http://jsfiddle.net/Bvk92/
It's also worth noting that <textarea> has no type attribute.
You forgot to close tag of text area .......
<article>
<form method="POST" name="form9" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="firstName">First Name <sup>*</sup></label>
<input type="text" id="firstName" name="firstName" required />
<label for="lastName">Last Name <sup>*</sup></label>
<input type="text" id="lastName" name="lastName"/>
<label for="wrstyle">Writing Style <sup>*</sup></label>
<textarea placeholder="Please, briefly describe your writing style." type="text" id="wrstyle" name="wrstyle"></textarea>
<label for="submit" class="centerit" title="Click here to register your account">
<input type="submit" name="submit" value="Sign Up" />
</label>
<p class="notice"><sup>*</sup> denotes a required field.</p>
</form>
</article>