Функцията за автодовършаване вече е една любима функция в интернет. Като въведете нещо в поле за формата, браузърите предлагат списък с предложения за думи, ако функцията е активирана и браузърът я поддържа.
От този момент такива приложения могат лесно да бъдат реализирани. За целта на елемента input се присвоява атрибута autocomplete.
<input type="text" autocomplete="on" />
Стойността on активира авто-довършаването за полето. От сега нататък браузърът запомня въведените стойности и ги предлага по-късно чрез списък с избор. По този начин формулярите могат да бъдат попълвани значително по-бързо.
Въпреки това това поведение не се желае за всяко поле. В такива случаи функцията за автодовършаване може да бъде изрично деактивирана. За целта на атрибута autocomplete се присвоява стойността off.
<input type="text" autocomplete="off" />
Освен това, може също да се добави атрибута autocomplete на елемента form. В зависимост дали тук се използва стойността on или off, функцията за автодовършаване за целия формуляр се активира или деактивира.
<form autocomplete="on"> .. </form>
В случай на противоречия в рамките на формуляра, само те се прилагат.
<form autocomplete="on"> Име: <input type="text" name="vname" autocomplete="off" /><br /> Презиме: <input type="text" name="nname" /><br /> Пощенски код: <input type="text" name="plz" /><br /> Място: <input type="text" name="ort" /> </form>
В този пример автодовършаването ще се приложи за всички полета на формуляра, тъй като стойността на атрибута autocomplete в началния елемент form е зададена на on. Изключение представлява само полето vname. Тъй като за това поле автодовършаването е изрично деактивирано.
За да функционира автодовършаването, тази функция трябва да бъде поддържана от съответния браузър и не трябва да е деактивирана. Освен това в списъка с предложения се показват само стойности, които вече са били въведени предварително.
За да имате реален контрол върху стойностите в списъка с предложения, беше въведен елементът datalist с HTML5. Този елемент не води до визуално извеждане в браузъра. Чрез подчинените option-елементи могат да се зададат стойности за списъците с предложения. Един пример:
<div> Език: <br /> <input type="text" autocomplete="on" list="sprache" /> </div> <datalist id="sprache"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
Чрез атрибута list на елемента input се създава логическа връзка между полето за въвеждане и елемента datalist. За да се постигне това, при атрибутите list и id на елемента datalist се използват същите стойности.
Задаване на фокуса
На формуларено поле автоматично може да бъде зададен фокус при зареждане на страницата. Такава функция може да се види например на началната страница на Google. Когато се отвори страницата, потребителят вече може да въведе търсения израз, без да е задължително по-напред да постави курсора ръчно в полето за търсене.
В HTML5 за тези случаи се използва атрибута autofocus. Този атрибут гарантира, че формуларното поле, обозначено с него, автоматично получава фокус при зареждане на страницата.
Един пример:
<form> <input name="searchField" autofocus="autofocus" /> <input type="submit" value="Search" /> </form>
Браузърите, които не разпознават атрибута autofocus, го пренебрегват. Това игнориране няма негативни последици. (Имайки предвид, че тогава полето не се фокусира).
Проверка на въведеното
Досега с HTML средства формите не можеха да бъдат проверявани самостоятелно. Ако искахте да проверите например дали потребителят е въвел наистина имейл адрес в поле на формуляра, обикновено използвахте JavaScript или PHP. В HTML5 подобни "трюкове" вече не са необходими. Тъй като HTML вече разполага със система за валидация. И тя определено е мощна. С много малко усилия вече може да се проверяват въведените стойности във формулярите.
HTML5 има някои правила, чрез които се определя как да се валидират полетата. Например полетата за въвеждане от тип email се проверяват дали са въведени синтактично коректни имейл адреси.
• url – Проверява URL адрес
• email – Проверява имейл адрес
• range – Проверява числа с плаваща запетая
• number – Проверява числа с плаваща запетая
За да се отбележи поле като задължително, му се присвоява атрибута required.
<input id="vname" name="vname" type="text" required="required" />
Поле, маркирано по този начин, трябва да бъде попълнено, следователно не трябва да е празно.
Но внимание: За да се валидират полетата, трябва да бъдат изпълнени определени условия.
• Трябва да бъде присвоен атрибутът name на елемента.
• Елементът трябва да бъде в рамките на form елемент, следователно да се намира в HTML формуляр. Алтернативно това връзката с формуляра може да се осъществи и чрез атрибута form.
• Елементът не трябва да притежава атрибутите readonly или disabled.
Така че правилното приложение ще изглежда по следния начин:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Тук браузърът ще провери дали полето е попълнено. Ако полето е празно и въпреки това се опитва да се изпрати формулярът, браузърът вече трябва да изведе съобщение за грешка.
През този поредица вече беше няколко пъти споменато за типовете полета във формуляра email, range, number, tel и url. Тези полета не само се проверяват за наличие на стойност, но и дали въведената стойност е коректна.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
При полетата от тип email се проверява например дали въведената стойност е наистина синтактично коректен имейл адрес. Ако това не е така, браузърът извежда съобщение за грешка.
За извеждане на съобщенията за грешка отговорни са браузърите.
Не позволявайте на полетата да бъдат автоматично проверявани
Не винаги автоматичната валидация на въведените данни е желателна. Ако искате да спрете валидацията на целия формуляр, присвоявате атрибута novalidate на началния form елемент.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Алтернативно, на бутона за изпращане може да се добави атрибута formnovalidate. Това е интересно например, когато предлагате бутона за записване на формуляра паралелно с бутона за изпращане.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Изпрати" />
<input type="submit"
formnovalidate="formnovalidate" value="Запиши" />
<input type="submit"
formnovalidate="formnovalidate" value="Изход" />
</form>
В този случай формулярът ще се валидира само чрез първия бутон за изпращане. Другите два са за записване и излизане. В тези случаи валидация не е необходима.
