HTML Обязательный тег воспроизводится

Question

Я делаю форму для задачи в классе, и никто не может понять, почему проверка ввода не работает.Код для всей формы ниже.Это именно обязательный тег, который, кажется, вызывает проблемы.

<form action = "">
                <p>First Name</p>
                <input type = "text" name = "firstname" size = "25" maxlength = "20"></input> <br>
                <p>Last Name</p>
                <input type = "text" name = "lastname" size = "25" maxlength = "20"></input> <br>
                <p>Age</p>
                <input type = "radio" name = "age" value = "<25" checked></input><25
                <input type = "radio" name = "age" value = "25-40" ></input>25-40
                <input type = "radio" name = "age" value = ">40" ></input>>40
                <input type = "radio" name = "age" value = "Rather not say" ></input>Rather not say <br>
                <div style = "float:left">
                    <p>Favourite food</p>
                    <select name = "Favourite food" style = "float:left;">
                        <option value = "1" selected>Italian</option>
                        <option value = "2">Indian</option>
                        <option value = "3">Thai</option>
                        <option value = "4">Chinese</option>
                    </select>
                </div>
                <br>
                <div style = "float:right">
                    <p>What new country would you like to see on the website?</p>
                    <select name = "newCountry">
                        <option value = "1" selected>Vietnamese</option>
                        <option value = "2">American</option>
                        <option value = "3">French</option>
                        <option value = "4">Spanish</option>
                    </select>
                </div>
                <br>
                <p style = "clear:both; float:left;">What new cooking technique would you like to see on the website?</p>
                <textarea name = "NewTechnique" rows = "5" cols = "100" maxlength = "500" style = "clear:both;"> </textarea>
                <br>
                <p>Please rate the following from 1 (poor) to 5 (excellent)</p>
                <p>Ease of use</p>
                <input type = "text" name = "easeofuse" size = "25" min = "1" max = "5" required=""></input> <br>
                <p>Quality of information</p>
                <input type = "text" name = "infoquality" size = "25" min = "1" max = "5" required></input> <br>
                <p>Taste of recipies</p>
                <input type = "text" name = "tastes" size = "25" min = "1" max = "5" required = ""></input> <br>
                <p>Permission for my information to be held and used for future developments</p>
                <input type ="radio" name = "permission" value = "1" required></input>Yes
                <input type ="radio" name = "permission" value = "2"></input>No
                <input type = "submit" onclick="alert('form entered')" value = "submit"></input>
            </form>

Я не вижу, в чем проблема.Это потому, что тег действия пуст?Нам сказали оставить это так.

Редактировать: проблема была решена!

Answer 1

Чтобы заставить работать поля формы required, я заменил onclick на onsubmit внутри тега form.Я также убрал все странности HTML, которые я обнаружил после быстрой проверки (я, вероятно, пропустил несколько).

<form onsubmit='alert("ya done clicked")'>
  <p>First Name</p>
  <input type="text" name="firstname" size="25" maxlength="20"> <br>
  <p>Last Name</p>
  <input type="text" name="lastname" size="25" maxlength="20"> <br>
  <p>Age</p>
  <input type="radio" name="age" value="&lt;25" checked>&lt;25
  <input type="radio" name="age" value="25-40">25-40
  <input type="radio" name="age" value=">40">&gt;40
  <input type="radio" name="age" value="Rather not say">Rather not say <br>
  <div style="float:left">
    <p>Favourite food</p>
    <select name="Favourite food" style="float:left;">
      <option value="1" selected>Italian</option>
      <option value="2">Indian</option>
      <option value="3">Thai</option>
      <option value="4">Chinese</option>
    </select>
  </div>
  <br>
  <div style="float:right">
    <p>What new country would you like to see on the website?</p>
    <select name="newCountry">
      <option value="1" selected>Vietnamese</option>
      <option value="2">American</option>
      <option value="3">French</option>
      <option value="4">Spanish</option>
    </select>
  </div>
  <br>
  <p style="clear:both; float:left;">What new cooking technique would you like to see on the website?</p>
  <textarea name="NewTechnique" rows="5" cols="100" maxlength="500" style="clear:both;"> </textarea>
  <br>
  <p>Please rate the following from 1 (poor) to 5 (excellent)</p>
  <p>Ease of use</p>
  <input type="text" name="easeofuse" size="25" min="1" max="5" required> <br>
  <p>Quality of information</p>
  <input type="text" name="infoquality" size="25" min="1" max="5" required> <br>
  <p>Taste of recipies</p>
  <input type="text" name="tastes" size="25" min="1" max="5" required> <br>
  <p>Permission for my information to be held and used for future developments</p>
  <input type="radio" name="permission" value="1" required>Yes
  <input type="radio" name="permission" value="2">No
  <input type="submit" value="submit">
</form>