Harshil Modi Harshil Modi - 13 days ago 5
HTML Question

'Required' attribute not working

I recently created html web pages for learning more about HTML, and I found 'required' attribute.

Can anyone tell me my mistake for 'required' attribute.

<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>

Answer

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.

Comments