HTML Обязательный тег воспроизводится
Я создаю форму для задачи в классе, и никто не может понять, почему проверка ввода не работает. Код для всей формы ниже. Кажется, именно этот тег вызывает проблемы.
<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>
Я не понимаю, в чем проблема. Это потому, что тег действия пуст? Нам сказали оставить все как есть.
Обновлено: проблема решена!
Исправление машина обнаруживает ошибки не повредит.
@Stuart - Просто <input> нормально. Нет необходимости в дополнительных /.
Это даже неверный HTML. 1. input не имеют закрывающих тегов; 2. когда вы хотите поместить < в текст страницы, вам нужно использовать сущности (< становится <). В противном случае браузер считает, что это открытие тега. Проверка формы, похоже, сработает, если вы исправите эти две вещи.
@Stuart Мне кажется глупым, что я удалил свой комментарий, не увидев, что вы на него ссылались ... Ой. При этом, Нико, было бы лучше, если бы вы добавили onsubmit в форму, а не onclick во входные данные. Я не уверен на 100%, но похоже, что браузер интерпретирует метод onclick кнопки и игнорирует форму.
@Quentin - Я педантичен, <input> - это элемент пустота, что означает, что SOLIDUS / разрешен, даже если он избыточен :)
@Stuart - я сказал "нет необходимости" не то, что они запрещены
@Quentin Я знаю - поэтому я говорю: "Я педантичен"! ;)
Ответы 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 = "<25" checked><25
<input type = "radio" name = "age" value = "25-40">25-40
<input type = "radio" name = "age" value = ">40">>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>Мне было бы интересно получить отзывы о том, что в этом ответе бесполезно. Это решает возникшую проблему, а именно то, что проверка формы не работала, при этом сохранялось предупреждение, как в исходном фрагменте OP.
Пожалуйста! Примите этот ответ, чтобы сообщить другим, что проблема решена.
Вам действительно следует кодировать свои
<, которые не являются частью тегов HTML, чтобы они стали<. Кроме того, как указал Джеймс, у вас полностью недопустимый HTML - вам не нужен<input></input>- просто<input />в порядке.