HTML5 Właściwości formularza

Właściwości HTML5 nowej formie

HTML5 w <form> i <input> tag dodaje kilka nowych właściwości.

<form> nowe atrybuty:

• autouzupełnianie
• novalidate

<input> Nowe właściwości:

• autouzupełnianie
• autofocus
• forma
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• Wysokość i szerokość
• lista
• min i max
• wielokrotność
• wzorca (regexp)
• zastępczy
• wymagany
• krok

<Form> / <input> atrybut autouzupełnianie

autouzupełnianie atrybut określa pole formularza lub wejście powinien mieć autouzupełniania.

Gdy użytkownicy rozpocząć wpisywanie w polu autouzupełniania, przeglądarka powinna wyświetlić opcje do wypełnienia w tej dziedzinie.

przypisująautouzupełniania możliwe elementem formularza jest włączone, a następnie w elemencie wejściowego jest wyłączony: Tip.

Uwaga: autouzupełnianie zastosowanie <form> tag oraz następujące rodzaje <input> tagu: tekst, wyszukiwanie, url, telefon , e-mail, hasło, datepickers, zakres i koloru.

Przykłady

Formularz HTML na otwartym autouzupełniania (a autouzupełnianie pola wejście wyłączające):

<Formularz action = "demo-form.php" autouzupełnianie = "on"> Imię : <input type = "text" name = ""> <br fname> Nazwisko: <input type = "text" name = ""> <br lname> E-mail: <input type = "e-mail" name = "email" autouzupełnianie = "off"> <br> <Wejście type = "submit"> </ Form>

Spróbuj »

Wskazówka: Niektóre przeglądarki, być może trzeba włączyć funkcję autouzupełniania w celu odebrania nieruchomości.

<Form> Nieruchomość novalidate

Właściwość logiczna właściwość novalidate.

atrybut novalidate określa podczas składania formularza nie powinno zatwierdzić formularz wejście lub domenę.

Przykłady

Bez składania formularza weryfikacji danych

<Formularz action = "demo-form.php" novalidate> E-mail: <input type = "e-mail" name = "USER_EMAIL"> <Wejście type = "submit"> </ Form>

Spróbuj »

<Input> atrybut autofocus

atrybut autofocus jest atrybutem logiczna.

atrybut autofocus określa, kiedy strona się ładuje, domena automatycznie otrzymywać ostrość.

Przykłady

Niech "Imię" pole wprowadzania wprowadzić ostrość auto na stronie obciążenia:

First name:<input type="text" name="fname" autofocus>

Spróbuj »

<Input> właściwości formularza

atrybut określa pole wejściowe Formularz należy do jednej lub kilku formach.

Wskazówka: Aby wymienić więcej niż jedną postać, użyj listę oddzielonych spacjami.

Przykłady

Znajduje się w postaci formularza zewnętrznym polu wprowadzania odnosi się do postaci HTML (forma jest jeszcze wejście formą wpisuje się):

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

Spróbuj »

<Input> Nieruchomość formaction

Nieruchomość formaction jest używany do określenia adresu URL składania formularza.

Formaction atrybutów override <form> elementu w atrybucie akcji.

Uwaga: formaction atrybutu type = "submit" oraz type = "image".

Przykłady

HtmlForm złożyć następujące Formularz zawiera przycisk dwa różne adresy:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>

Spróbuj »

<Input> Nieruchomość formenctype

formenctype atrybut opisuje formularz jest przesyłany do kodowania danych serwera (tylko dla metody Postaci = "post" forma)

formenctype nadpisania właściwości enctype atrybutów elementów formularza.

Główne: Tego typu atrybut = "submit" oraz type = "obraz" użyte w połączeniu.

Przykłady

Przycisk najpierw przesłać do wysyłania danych formularza jest kodowana domyślnie sekundy przycisk Prześlij do "wieloczęściowy / form-data" format kodowania danych, aby wysłać formularz:

<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

Spróbuj »

<Input> Nieruchomość formmethod

atrybut formmethod określa sposób składania formularza.

Obiekt formmethod obejmujące <form> atrybutu metody elementu.

Uwaga: Ten atrybut może być używany z type = "submit" oraz type = "obraz" użyte w połączeniu.

Przykłady

Redefine złożenie formularza Tytułem przykładu:

<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>

Spróbuj »

<Input> Nieruchomość formnovalidate

Obiekt novalidate jest właściwość logiczna.

atrybut novalidate opisuje <input> elementy nie muszą być weryfikowane, gdy formularz jest składany.

formnovalidate atrybuty zastępują novalidate atrybut <form> element.

Uwaga: formnovalidate typu atrybut = "submit do użytku z

Przykłady

Dwa przyciski przesłać formularz (nie dotyczy z weryfikacją):

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>

Spróbuj »

<Input> Nieruchomość formtarget

atrybut formtarget określa nazwę lub słowo kluczowe, aby wskazać otrzymane dane wyświetlane po przesłaniu formularza.

W formtarget nadpisania właściwości <form> atrybutu target elementu.

Uwaga: formtarget typu atrybut = "submit" oraz type = "obraz" użyte w połączeniu.

Przykłady

Dwa przyciski przesłać formularz wyświetlany w różnych oknach:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>

Spróbuj »

<input> wysokość i szerokość atrybuty

wysokość i szerokość atrybuty określone dla danego typu obrazu <input> wysokość i szerokość obrazu tag.

Uwaga: Właściwości wysokośći szerokość mają zastosowanie tylko do typu obrazu znacznika <input>.

Wskazówka: Obraz zazwyczaj określić wysokość i szerokość atrybuty.Jeśli obraz ustawić wysokość i szerokość przestrzeni wymaganej dla obrazu po załadowaniu strony zostaną zachowane. Bez tych cech, przeglądarka nie zna rozmiaru obrazu i nie można uchylić odpowiednią przestrzeń. Zdjęcia podczas procesu ładowania wpłynie zmiana układu strony (choć obraz został załadowany).

Przykłady

Definiuje obraz przycisk Prześlij, użyj wysokość i atrybuty width:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Spróbuj »

<input> właściwości listy

datalist atrybut określa listę pól wejściowych. datalist jest lista opcji dla pól wejściowych.

Przykłady

Predefiniowane w <datalist> w <input> wartości:

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Spróbuj »

<Input> MIN i MAX atrybuty

min, max, a atrybuty step służą jako typy wejściowych zawierających cyfry lub termin Limited (ograniczenia).

Uwaga: min, max, a atrybuty krok zastosowanie do następujących typów <input> tag: Data zbieraczy, liczby i zakresu.

Przykłady

<Input> elementy minimalnymi i maksymalnymi ustawieniami:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Spróbuj »

<input> wiele właściwości

stwardnienie atrybut jest atrybutem logiczna.

wielokrotne określa atrybut <input> elementów, aby wybrać wiele wartości.

Uwaga: wiele właściwości zastosowanie do następujących typów <input> Tag: e-mail i pliku:

Przykłady

Prześlij wiele plików:

Select images: <input type="file" name="img" multiple>

Spróbuj »

<Input> Nieruchomość wzór

atrybut wzór opisuje wyrażenie regularne używane do sprawdzania poprawności wartości <input> elementów.

Uwaga: atrybut wzórma zastosowanie do następujących typów <input> tagu: tekst, wyszukiwanie, url, tel , e-mail i hasło.

Wskazówka: Służy do globalnego tytułowej atrybutu opisuje tryb.

Wskazówka: Można w naszym poradniku JavaScript , aby dowiedzieć się o treści wyrażenia regularnego

Przykłady

Poniższy przykład pokazuje trzy litery zawierać tylko pole tekstowe (bez cyfry lub znaki specjalne):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Spróbuj »

<Input> atrybut zastępczy

atrybut zastępczy stanowi wskazówkę (wskazówka), opisać oczekiwaną wartość pola wejściowego.

Krótkie przypomnienie zostanie wyświetlona w polu wejściowym przed wartością wprowadzania danych przez użytkownika.

Uwaga: atrybut zastępczyma zastosowanie do następujących typów <input> tagu: tekst, wyszukiwanie, url, telefon , e-mail i hasło.

Przykłady

pole wprowadzania tekstu wiersza t:

<input type="text" name="fname" placeholder="First name">

Spróbuj »

<Input> wymagany atrybut

Wymagany atrybut jest atrybutem logiczna.

Wymagany atrybut określa, że ​​pole wejściowe muszą być wypełnione (nie jest pusty) przed złożeniem.

Uwaga: wymagane atrybuty dla następujących typów <input> tagu: tekst, wyszukiwanie, url, telefon , e-mail, hasło, data, numer, zbieraczy checkbox, radio i pliku.

Przykłady

Nie pustych pól wejściowych można:

Username: <input type="text" name="usrname" required>

Spróbuj »

<input> atrybuty step

atrybut krok dla pola wejściowego określa prawne interwałów numerycznych.

Jeśli krok = "3", numery prawne mogą być -3,0,3,6 itp

Wskazówka: atrybut krokmoże stworzyć regionalną wartością maksymalną i minimalną atrybutów.

Uwaga: liczba, zakres, datę, datetime: Krok rodzajów stosowanych w połączeniu z następujących typów atrybutów , datetime-local, miesiąc, raz na tydzień.

Przykłady

Z góry określony krok po wejście 3:

<input type="number" name="points" step="3">

Spróbuj »

HTML5 <input> tag