HTML Input Attributes

value Özellik

value özelliği, bir giriş alanı için başlangıç değeri belirtir:

readonly Özellik

readonly özellik giriş alanı salt okunur olduğunu belirten (cannot be changed) :

readonly özellik değerini ihtiyacı yoktur. Bu "readonly" salt okunur = yazma aynıdır.

disabled Özellik

disabled nitelik giriş alanı devre dışı olduğunu belirtir.

Bir devre elemanı un kullanılabilir ve BM-tıklanabilir.

Engelli unsurlarının sunulması edilmeyecektir.

disabled nitelik değeri ihtiyacı yoktur. Bu "özürlü" = özürlü yazma aynıdır.

size Özellik

size özniteliği boyutunu belirtir (in characters) giriş alanı için:

maxlength Özellik

maxlength nitelik giriş alanı için izin verilen maksimum uzunluğu belirtir:

Bir ile maxlength özniteliği, giriş kontrol karakterlerinin izin verilenden fazla sayıda kabul etmeyecektir.

nitelik herhangi bir geri bildirim sağlamaz. Eğer kullanıcıyı uyarmak için istiyorsanız, JavaScript kodu yazmalısınız.

HTML5 Nitelikler

HTML5 ekledi following için öznitelikleri <input> :

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

ve following öznitelikleri <form> :

• autocomplete
• novalidate

autocomplete Özellik

autocomplete özelliği, bir form veya giriş alanı sahip olup olmayacağını belirtmekte autocomplete açık veya kapalı.

Ne zaman autocomplete açık, tarayıcı otomatik tamamlama değerleri kullanıcı önce girdiği değerlere dayalı.

Tip: Bu sahip olmak mümkündür autocomplete "on" form için ve "off" ya da tam tersi belirli giriş alanlarına veya buraya.

autocomplete özelliği, çalışır <form> ve aşağıdaki <input> : türleri text, search, url, tel, email, password, datepickers, range, and color .

Örnek

Ile bir HTML formu autocomplete üzerinde (and off for one input field) :

<form action="action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Kendin dene "

İpucu: Bazı tarayıcılarda etkinleştirmek gerekebilir autocomplete bunun işe yaraması için işlevini.

novalidate Özellik

novalidate nitelik bir olduğunu <form> özniteliği.

Mevcut olduğunda, novalidate gönderirken form verileri valide edilmemesi gerektiğini belirtir.

Örnek

formu değil göndermek üzerinde doğrulanması olduğunu gösterir:

<form action="action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

Kendin dene "

autofocus Özellik

autofocus özelliği, bir boole niteliktir.

Mevcut olduğunda, bu belirtir bir <input> elemanı sayfa yüklendiğinde otomatik olarak odak almalısınız.

Örnek

Let "First name" giriş alanı sayfa yüklendiğinde otomatik olarak odak almak:

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

Kendin dene "

form Özellik

form özniteliği bir veya daha fazla form belirten <input> öğesi aittir.

Tip: Birden fazla forma başvurmak bir boşluk koyarak kullanmak için form ids .

Örnek

Bir input field HTML formu dışında bulunan (but still a part of the form) :

<form action="action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

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

Kendin dene "

formaction Özellik

formaction nitelik form gönderildiğinde girdi denetimi işleyecek bir dosyanın URL'sini belirtir.

formaction nitelik geçersiz kılar action vasfını <form> elemanı.

formaction nitelik "Gönder" ve = "görüntü" type = türüyle kullanılmaktadır.

Örnek

iki ile bir HTML formu farklı eylemlerle, gönderme düğmeleri:

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Submit as admin">
</form>

Kendin dene "

formenctype Özellik

formenctype nitelik sunucuya gönderilirken form-data kodlanmış nasıl olması gerektiği belirtilir (only for forms with method="post" ) .

formenctype nitelik geçersiz kılar enctype vasfını <form> elemanı.

formenctype nitelik kullanılır type="submit" ve type="image" .

Örnek

Gönder form-data varsayılan kodlanmıştır (the first submit button) ve aynı kodlanmış "multipart/form-data" (the second submit button) :

<form action="demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Kendin dene "

formmethod Özellik

formmethod özelliği göndermek için HTTP yöntemi tanımlar form-data işlem URL'ye.

formmethod özelliği, geçersiz kılan method niteliğini <form> elemanı.

formmethod nitelik ile kullanılabilir type="submit" ve type="image" .

Örnek

İkinci gönderme düğmesi formun HTTP yöntemini geçersiz kılar:

<form action="action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="Submit using POST">
</form>

Kendin dene "

formnovalidate Özellik

novalidate nitelik bir boole niteliktir.

Mevcut bu ifade ettiğinde <input> gönderirken eleman valide edilmemelidir.

formnovalidate nitelik geçersiz kılar novalidate vasfını <form> elemanı.

formnovalidate nitelik ile kullanılabilir type="submit" .

Örnek

Düğmeleri göndermek iki ile bir form (with and without validation) :

<form action="action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

Kendin dene "

formtarget Özellik

formtarget nitelik ad veya formu gönderdikten sonra alınan yanıtı görüntülemek yeri belirten bir anahtar sözcük belirtir.

formtarget nitelik geçersiz kılar target vasfını <form> elemanı.

formtarget özellik = "Gönder" ve = "görüntü" yazın türüyle kullanılabilir.

Örnek

iki ile bir form farklı hedef pencereli, gönderme düğmeleri:

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

Kendin dene "

height ve width Özellikler

height ve genişlik özellikleri bir yüksekliğini ve genişliğini belirlemek <input> elemanı.

height ve width özellikler yalnızca kullanılan <input type="image"> .

Örnek

yükseklik ve genişlik özellikler sayesinde gönder düğmesi gibi bir görüntü tanımlayın:

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

Kendin dene "

list Özellik

list özelliği, bir belirtmektedir <datalist> bir ön-tanımlı seçenek içeren eleman <input> elemanı.

Örnek

Bir <input> bir önceden belirlenmiş değerlerle elemanı <datalist> :

<input list="browsers">

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

Kendin dene "

min ve max Özellikler

min ve max bir minimum ve maksimum değeri belirtmek niteliklerini <input> elemanı.

min ve max aşağıdaki giriş türleriyle işi bağlıyor: number, range, date, datetime, datetime-local, month, time and week .

Örnek

<Giriş> minimum ve maksimum değerler ile elementler:

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

Kendin dene "

multiple Attribute multiple Attribute

multiple nitelik bir boole niteliktir.

Mevcut olduğunda, kullanıcı birden fazla değer girmek için izin verildiğini belirten <input> elemanı.

multiple : niteliği, aşağıdaki input türleriyle çalışır email ve file .

Örnek

birden çok değer kabul bir dosya yükleme alanı:

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

Kendin dene "

pattern Özellik

pattern nitelik ifade belirtilir <input> öğenin değeri ile karşılaştırılır.

pattern : niteliği, aşağıdaki input türleriyle çalışır text, search, url, tel, email, and password .

İpucu: Küresel kullanın başlık kullanıcıya yardımcı olmak için desen tanımlamak için özniteliği.

Tip: hakkında daha fazla bilgi Normal ifadeler JavaScript öğretici.

Örnek

Sadece üç harf içerebilir Bir giriş alanı (no numbers or special characters) :

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

Kendin dene "

placeholder Özellik

placeholder özelliği, bir giriş alanının beklenen değerini tanımlayan bir ipucu belirtir (a sample value or a short description of the format) .

Kullanıcı bir değer girmeden önce ipucu giriş alanında görüntülenir.

placeholder : niteliği, aşağıdaki input türleriyle çalışır text, search, url, tel, email, and password .

Örnek

Yer tutucu metin ile bir giriş alanı:

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

Kendin dene "

required Özellik

required nitelik bir boole niteliktir.

Mevcut olduğunda, bir giriş alanı formu göndermeden önce doldurulması gerekir belirtir.

required : niteliği, aşağıdaki input türleriyle çalışır text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file .

Örnek

Gerekli bir giriş alanı:

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

Kendin dene "

step Özellik

step niteliği bir yasal numara ara belirtir <input> elemanı.

Örnek: adım = "3", yasal numaraları -3, 0, 3, 6 olabilir, eğer, vs.

Tip: step niteliği ile birlikte kullanılabilir max ve min yasal değerleri bir dizi oluşturmak için bağlıyor.

step : niteliği, aşağıdaki input türleriyle çalışır number, range, date, datetime, datetime-local, month, time and week .

Örnek

Belirtilen yasal numara aralıklarla bir giriş alanı:

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

Kendin dene "

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»