I have made a form with two inputs with the same classes but they have different appearances. They only get the same appearances if I change the type from "email" to "text". Is it a problem with the code or is it HTML5 that does it?
<form action="../../../redirect.html">
<input name="username" id="login-username" class="login-input pure-u-1" type="email" maxlength="96" tabindex="1" aria-required="true" value="" placeholder="Indtast din e-mail" title="Indtast din e-mail" autocorrect="off" spellcheck="false" required autofocus>
<input name="password" id="login-password" class="login-input pure-u-1" type="password" maxlength="96" tabindex="1" aria-required="true" value="" placeholder="Indtast din adgangskode" title="Indtast din adgangskode" autocorrect="off" spellcheck="false" required>
<button type="submit" formaction="../../../redirect.html" id="login-signing" class="pure-u-1 pure-button mbr-button-primary" value="Submit" tabindex="1">Login</button>
</form>
in your css file, it seems that it style input's that has class "pure-form" but you have used "login-input". so it seem's that the problem is about how to use your css style not about "HTML5".
this is the correct code:
<form action="../../../redirect.html">
<input name="username" id="login-username" class="pure-form pure-u-1" type="email" maxlength="96" tabindex="1" aria-required="true" value="" placeholder="Indtast din e-mail" title="Indtast din e-mail" autocorrect="off" spellcheck="false" required autofocus>
<input name="password" id="login-password" class="pure-form pure-u-1" type="password" maxlength="96" tabindex="1" aria-required="true" value="" placeholder="Indtast din adgangskode" title="Indtast din adgangskode" autocorrect="off" spellcheck="false" required>
<button type="submit" formaction="../../../redirect.html" id="login-signing" class="pure-u-1 pure-button mbr-button-primary" value="Submit" tabindex="1">Login</button>
</form>
Related
I have a simple html formula with many input fields:
<input type="text" id="vorname" name="vorname" placeholder="Vorname" autocomplete="given-name" required>
<input type="text" id="nachname" name="nachname" placeholder="Nachname" autocomplete="family-name" required>
<input type="text" id="firma" name="firma" placeholder="Firma" autocomplete="organization">
<input type="text" id="strasse" name="strasse" placeholder="Straße" autocomplete="address-level2" required>
<input type="text" id="plz" name="plz" placeholder="PLZ" maxlength="5" pattern="[0-9]+" autocomplete="postal-code" required>
<input type="text" id="ort" name="ort" placeholder="Ort" autocomplete="street-address" required>
<input ype="email" id="email" name="email" placeholder="E-Mail" autocomplete="email" required>
<input type="tel" id="tel" name="tel" placeholder="Telefon" pattern="[0-9]+" autocomplete="tel" required>
If I call the website with my iPhone and I click on the first input "vorname" I get the option "Fill contact automatically".
All values will be filled automatically except "nachname","firma","Straße","PLZ"
On Safari (macOS) I get no option to filled any fields.
Where is my mistake?
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.
This is my form for user or admin. This formed is saved to database using shared service. After clicking button toaster service is not opening. At first click form will be submitted but form not reseted and toaster service will not open.After doule click only toaster opens and form submitted with empty.
<form method="post" class="minimal" #customerForm=ngForm (submit)="addCustomer()" >
<label for="username">
Username:
<input type="text" name="username" id="username" [(ngModel)]="user.username" placeholder="Enter Username" required="required">
</label>
<label for="password">
Password:
<input type="password" name="password" id="password" [(ngModel)]="user.password" placeholder="Enter Password" required="required" />
</label>
<label for="isAdmin">
Admin:
<select class="admin" type="text" name="admin" [(ngModel)]="user.isAdmin" required>
<option>User</option>
<option>Admin</option>
</select>
</label>
<label for="email">
Email:
<input type="email" name="email" id="email" [(ngModel)]="user.emailId" placeholder="Enter Email" required="required" />
</label>
<label for="phone">
Phone No:
<input type="number" name="phone" id="phone" [(ngModel)]="user.phoneNo" placeholder="Enter Phone" required="required" />
</label>
<label for="dob">
Date of Birth:
<input type="date" name="date" id="date" [(ngModel)]="user.dob" placeholder="Enter Date" required="required" />
</label>
<button type="submit" class="btn btn-minimal btn-submit" [disabled]="!customerForm.form.valid">Create</button>
<toaster-container></toaster-container>
This is my ts file
addCustomer() {
console.log("user",this.user);
this.persistanceService.addUser(this.user).subscribe((result: User) => {
this.cdRef.detectChanges();
console.log("admin",this.user.isAdmin)
this.toast();
this.user = new User();
});
so after I made these changes the form won't accept any input. Meaning if I don't put in a first name it says 'Please enter first name". Works like it should. But if I put in a name it still says the same thing. It won't recognize I put in a name. Happens in each field and I have to refresh the page to make it work. Any ideas?
<form action="register.php" method="post">
<p>First Name: <input type="text" name="first_name" size="15" maxlength="20" required oninvalid="this.setCustomValidity('Please Enter first name')"></input> </p>
<p>Last Name: <input type="text" name="last_name" size="15" maxlength="40" required oninvalid="this.setCustomValidity('Please Enter last name')"></input>></p>
p>Email Address: <input type="text" name="email" size="20" maxlength="60" required oninvalid="this.setCustomValidity('Please Enter a valid email')"> </input>></p>
<p>Password: <input type="password" name="pass1" size="10" maxlength="20" required oninvalid="this.setCustomValidity('Please Enter a valid password')"> </input></p>
<p>Confirm Password: <input type="password" name="pass2" size="10" maxlength="20" required></p>
<p><input type="submit" name="submit" value="Register" /></p>
</form>
You need to setCustomValidity('') to clear the invalidated state of the field.
You can see it work here
<form action="register.php" method="post">
<p>First Name: <input type="text" name="first_name" maxlength="20"
required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter first name')"/></p>
<p>Last Name: <input type="text" name="last_name" size="15" maxlength="40" required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter last name')"/></p>
<p>Email Address: <input type="text" name="email" size="20" maxlength="60" required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter a valid email')"/></p>
<p>Password: <input type="password" name="pass1" size="10" maxlength="20" required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter a valid password')"/> </p>
<p>Confirm Password: <input type="password" name="pass2" size="10" maxlength="20" required /></p>
<p><input type="submit" name="submit" value="Register" /></p>
</form>
<form id="contact_form" action="/contact-verzenden" method="POST" enctype="multipart/form-data" >
<input class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" value="Jouw naam" required/>
<input class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;" value="Telefoon" required/>
<input class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;" value="E-mail" required/>
<textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required >Vraag/opmerking</textarea>
<input id="submit_button" type="submit" value="Verzenden" />
</form>
When I click submit, the data sends regardless of whether something has been entered or not.
Even though it's exactly the same as the W3 schools example:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_required
What am I doing wrong?
Because you still have value in every input elements.
Try using placeholder to make it look like your design.
<input class="textbox" type="text" name="name" id="name" placeholder="test" required/>
check this code:
<!DOCTYPE html>
<form id="contact_form" method="POST" enctype="multipart/form-data" >
<input class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" placeholder="Jouw naam" required/>
<input class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;" placeholder="Telefoon" required/>
<input class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;" placeholder="E-mail" required/>
<textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required ></textarea>
<input id="submit_button" type="submit" value="Verzenden" />
</form>
</html>
Because you are already giving him value (value="Jouw naam") and also onblur you are giving it a value ("Naam"). So the value is never empty. That`s why it is submitting the form.
Add placeholder="Jouw naam" instead of value = "Jouw naam"
Hope it helps !!