This question already has answers here:
HTML5 required attribute not working
(2 answers)
Closed last month.
I recently created a web page for me to learn more about HTML, and I found the 'required' attribute. I added it to the fields, but it didn't do anything.
Can anyone tell me my mistake for 'required' attribute?
I want it to say "Please fill this field" when the field is empty
<html>
<head>
<link href="icon.ico" rel="icon">
<title>Log In</title>
</head>
<body>
<h1 align="center">Welcome to site</h1>
<hr width="50%"/>
<br/>
<table align="center">
<form>
<tr>
<td>Log In : </td>
<td><input type="text" name="LogInEmail" placeholder="Enter your email" required></td> </tr><tr>
<td>Password : </td>
<td><input type="password" name="password" placeholder="Password" required></td>
</tr>
</form>
</table>
<br/>
<table align="center">
<form>
<tr>
<td><input type="submit" value=" Log In "/></td>
</tr>
</form>
</table>
</body>
</html>
Please make sure you have submit inside the first form.
You have multiple forms. Hence required is not working.
<html>
<head>
<link href="icon.ico" rel="icon">
<title>Log In</title>
</head>
<body>
<h1 align="center">Welcome to site</h1>
<hr width="50%" />
<br/>
<table align="center">
<form id="form1" runat="server">
<tr>
<td>Log In : </td>
<td>
<input type="text" name="LogInEmail" placeholder="Enter your email" required>
</td>
</tr>
<tr>
<td>Password : </td>
<td>
<input type="password" name="password" placeholder="Password" required>
</td>
</tr>
<tr>
<td>
<input type="submit" value=" Log In " />
</td>
</tr>
</form>
</table>
</body>
</html>
But if you insist in having multiple tables and forms, before submit, you can validate the first form. If I am not wrong, you are trying have a better UI placement which can be dealt with CSS instead of multiple Forms and tables.
You took two form.You should place your submit button in the same form input require field exist.Be Careful with form.
Related
How can I direct different users to specific pages, using HTML, PHP, and MYSQL? I need a login page that will do that. The code is logging in but to only one common page.
Here is my HTML code:
<html>
<head>
<meta id="_moz_html_fragment">
</head>
<body style="background-image:url(ocean5.jpeg)">
<div style="text-align: center;"><br>
<br>
<br>
<br>
<big><big>LETTER HEAD SYSTEM<br>
<br>
<br>
</big></big>
<form method="post" action="view.php">
<center>
<table width="30%">
<tbody>
<tr>
<td style="text-align: left;">USERNAME<br>
</td>
<td><input name="username" type="text"><br>
</td>
</tr>
<tr>
<td style="text-align: left;">PASSWORD<br>
</td>
<td><input name="password" type="password"><br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<form method="post" action="view.php">
<input value="LOGIN" name="submit" type="submit"><br>
</form>
</center>
</form>
<big><big><br>
</big></big></div>
</body>
</html>
I have an HTML page with input fields and two buttons: Submit and Reset. When the user clicks on Submit, the required validation messages come up, that's fine, but they also come up when clicking Reset.
HTML:
<html>
<body>
<form action="insertVoucherCategory" method="post">
<table>
<tr>
<td>Voucher Category</td>
<td> </td>
<td><input name="voucherCategory" id="voucherCategory" title="Please Enter Voucher Category" required="required" placeholder="Enter Voucher Category" tabindex="1" /></td>
</tr>
<tr>
<td>Description</td>
<td> </td>
<td><input name="description" id="description" title="Please Enter Description" required="required" placeholder="Enter Description" tabindex="2" /></td>
</tr>
<tr>
<td><input type="submit" id="btnAdd" value="Submit" tabindex="3"/></td>
<td> </td>
<td><input type="reset" id="btnReset" value="Reset" tabindex="4"/></td>
</tr>
<table>
</form>
</body>
</html>
This is what happens on Reset:
This is what I want:
<input type="button" value="Reset" onclick="hideMsg()" />
function hideMsg(){
$('.errMsg').hide();
$('.required').val('');
$('.required').addClass('blueBorder');
$('.required').removeClass('redBorder');
}
Use the type="reset" attribute on an <input> or <button> to automatically use HTML5 validation to clear the validation highlighting.
Tested satisfactorily on IE11 and Edge on Windows 10...
HI i want to validate an input type=email field with a submit button.
I have two form element in the page. And i am opening a div(divForgotPassword) as a modal.
But the required attribute is not working inside the modal .
Below is my my code
<form id="form1" runat="server">
//some elements
<form id="form2" action="javascript:RetrievePassword();">
<div id="divForgotPassword" style="display:none" title="Forgot password">
<table>
<tr>
<td>
<asp:Label ID="lblForgotPassword" runat="server" Text="Email"></asp:Label>:
</td>
<td>
<input type="email" required="required" id="txtForgotEmail" />
</td>
</tr>
<tr>
<td>
<input type="submit" style="background-image:url('Images/buttons/btn_send.png')" id="btnSend" />
</td>
</tr>
</table>
</div>
</form>
<form id="form2" action="javascript:RetrievePassword();">
<div id="divForgotPassword" title="Forgot password">
<table>
<tr>
<td>
<label for="txtForgotEmail">
EMAIL : </label>
<td>
<input type="email" required="required" id="txtForgotEmail" />
</td>
</tr>
<tr>
<td>
<input type="submit" style="background-image:url('Images/buttons/btn_send.png')" id="btnSend" />
</td>
</tr>
</table>
</div>
please find this demo DEMO
Does this code contain anything invalid. I have a form with a table inside. Is that alright?
<form name="myForm" id="myForm">
<table id="myTab">
<tr>
<td>
<label for="id">User ID:</label>
<input type="text" id="id" />
</td>
</tr>
<tr>
<td>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" />
</td>
<td>
<button type="button" class="submit">Submit</button>
</td>
</tr>
<tr><td><input type="reset" /></td></tr>
</table>
<div class="error"></div><div class="correct"></div>
</form>
For the result -- http://jsfiddle.net/mBwAh/
A <form> can contain text and markup (paragraphs, lists, etc.), there are no restrictions listed for what it can contain. Here's the W3C spec which says so:
http://www.w3.org/TR/html4/interact/forms.html#h-17.3
As for you're <table> usage, it's perfectly valid HTML, in fact the <table> element is in the HTML5 spec Here's the W3C Spec for that:
http://www.w3.org/TR/html5/tabular-data.html#the-table-element
You'll want to also add a colspan to your <tr> which only contains one <td>, You should also add a name attribute to your <input> as it won't do anything on submit without it.
<input type="text" id="id" name="id" />
You're not saying what the problem is, but one thing that catches the eye is the fact that you have differing numbers of tds per row without a colspan to even them out.
<tr>
<td colspan="2"> <--- makes column span across three columns in the other rows
<form name="myForm" id="myForm">
<table id="myTab">
<tr>
<td colspan="2">
<label for="id">User ID:</label>
<input type="text" id="id" />
</td>
</tr>
<tr>
<td>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" />
</td>
<td colspan="2">
<button type="button" class="submit">Submit</button>
</td>
</tr>
<tr><td colspan="2"><input type="reset" /></td></tr>
</table>
<div class="error"></div><div class="correct"></div>
</form>
Some colspans were missing.
You can check the code for HTML5 validity here: http://validator.w3.org/#validate_by_input
This might be "Valid", but you're using a table structure for layout purpose, which is not a great idea. If possible, you should change your stucture to something like this.
<form name="myForm" id="myForm">
<label for="id">User ID:</label>
<input type="text" id="id" /><br />
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" /><br />
<button type="button" class="submit">Submit</button><br />
<input type="reset" /><br />
<div class="error"></div><div class="correct"></div>
</form>
Hope this help :)
This form code is working in Mozilla and Chrome, but in Internet Explorer it is not working.
<form method="post" action="logincheck.php" >
<span class="meta">
<table>
</span>
<tr>
<td>
<span class="meta">
<label >Username </label>
</span>
<label>
</td>
<td> <input name="username" type="text" />
</label>
</form>
</td>
</tr>
<tr>
<td> <label ><span class="meta">Password</td>
<td>
<input name="password" type="password" />
</span>
</label>
</td>
</tr>
<tr>
<td>
<span class="meta">
</span>
<label>
<input type="submit" name="Submit" value="Submit" class="submit"/>
</label>
</td>
</tr>
</table>
</form>
You have a number of HTML errors, most important being an extra </form> tag shortly after the first <input>. That means the second input and the submit button are outside the form, so it won't work. Firefox and Chrome are being a bit more forgiving here it seems.
Fix your HTML and the form should work fine.
You have errors that automated QA tools can detect
<form method="post" action="logincheck.php">
<label for="username">Username</label>
<input name="username" type="text" />
<label for="password">Password</label>
<input name="password" type="password" />
<input type="submit" name="Submit" value="Submit" class="submit" />
</form>
The correct code for this form must look like this.
You do not need the table, you can style the form with easily with CSS over selecting the label & input fields
<span class="meta">
<table>
</span>
The nesting is wrong. In fact, there's a lot more wrong. Try googling what <label> does exactly, and what <span> does and when you want to use it. You probably want something like this:
<form method="post" action="logincheck.php" >
<table>
<tr>
<td><label class="meta">Username </label></td>
<td><input name="username" type="text" /></td>
</tr>
<tr>
<td><label class="meta">Password</td>
<td><input name="password" type="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Submit" value="Submit" class="submit"></td>
</tr>
</table>
</form>
Here is a version without span tags, label and extra </form> in the middle of the table before submit button.
I guess, you added those by hands in plain text editors.
<form method="post" action="logincheck.php">
<table>
<tr>
<td>
Username
</td>
<td>
<input name="username" type="text" />
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input name="password" type="password" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit" class="submit" />
</td>
</tr>
</table>
</form>
One first error is:
<span class="meta">
<table>
</span>
But you have many errors.
Open and close tags as you will do with parenthesis. No horse riding. HTML and now XHTML need you to be a little bit more conscientious.
usefull tool:
http://giminik.developpez.com/xhtml/
http://validator.w3.org/