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>
Related
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.
I am writing the following HTML code which requires certain input values and has a submit button which redirects to a different site when clicked. Currently the Submit button redirects even if no value is entered into the input boxes. I want the submit button to only work if all the input values are filled.
<!DOCTYPE html>
<html>
<body>
<h3>Please enter the following information</h3>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="" required><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="" required><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" value="" required><br>
<label for="UserID">UserID:</label><br>
<input type="text" id="UserID" name="UserID" value="" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="" required><br><br>
<input onclick="window.location.href = 'https://example.site';" type="submit" value="Submit" />
</form>
</body>
</html>
The reason is because your submit isn't properly structured.
You see, if you replace your input submit with a button, it works perfectly:
<!DOCTYPE html>
<html>
<body>
<h3>Please enter the following information</h3>
<form action="https://example.site">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="" required><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="" required><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" value="" required><br>
<label for="UserID">UserID:</label><br>
<input type="text" id="UserID" name="UserID" value="" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="" required><br><br>
<button>Submit</button>
</form>
</body>
</html>
All you would have to change is add the link which you want it to redirect to in the action defined in the form.
This is the recommended method.
Keep in mind that you should always perform server-side checks regardless of whether there is a required attribute in the input field, as it can easily be removed.
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'm learning HTML and I had some problems today with the page on the picture, I wanted to have the e-mail input under the First Name (just like the picture) input but when I first tried, it just went to the right of the page, right after Last Name, so I had to close the <form> and open it again so it would move a block below. Is there another way to do that?
The most simple answer is to use a <br /> element:
<h1>Course Signup Page</h1>
<form id="loginform">
<label for="firstname">First name</label> <input type="text" id="firstname" />
<label for="lastname">Last name</label> <input type="text" id="lastname" />
<br /> <!-- you can simply insert a line-break here -->
<label for="email">E-Mail</label> <input type="email" id="email" />
<label for="password">Password</label> <input type="password" id="password" />
</form>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
Another option is to wrap your rows in any appropriate block level element (not a form element though, as that will interfere with the submitting, and also form elements cannot be nested).
Block level elements have some standard rendering behaviour:
They take as much horizontal space as they can get.
They cause a line-break before and after themselves. <- The relevant part for you.
They can be assigned width and height via CSS.
The standard element for this is div:
<h1>Course Signup Page</h1>
<form id="loginform">
<div>
<label for="firstname">First name</label> <input type="text" id="firstname" />
<label for="lastname">Last name</label> <input type="text" id="lastname" />
</div>
<div>
<label for="email">E-Mail</label> <input type="email" id="email" />
<label for="password">Password</label> <input type="password" id="password" />
</div>
</form>
This does not fix the alignment problem, though.
I'd rather suggest you make use of the power of CSS and use a CSS grid:
#loginform {
display: grid;
grid-template-columns: repeat(4, minmax(0, min-content));
grid-column-gap: 20px;
grid-row-gap: 5px;
}
#loginform label {
white-space: nowrap;
}
<h1>Course Signup Page</h1>
<form id="loginform">
<label for="firstname">First name</label> <input type="text" id="firstname" />
<label for="lastname">Last name</label> <input type="text" id="lastname" />
<label for="email">E-Mail</label> <input type="email" id="email" />
<label for="password">Password</label> <input type="password" id="password" />
</form>
It has to be said though, that this requires additional effort to make it work in IE 10 / 11.
What tag should i use for small amount of text. For example it is good practise to use p tag for every "small" text like here "username" and pasword" or for day/month/year, should i use also p tag?
<div class="login-area">
<p>Username:</p>
<input type="text">
<p>Password:</p>
<input type="password">
</div>
Use
<label for="name">Your Form label</label>
<input type="text" name="name">
<label for="password">Your Form label</label>
<input type="password" name="password>
As Others have suggested <label></label> tag is other option that you can use.
Some of it's use cases are as follows:
<input type="text" id="lastname" />
<label for="lastname">Last Name</label>
<label>
Name : <input type="text" name="lastname" />
</label>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />