0Pricing
HTML Academy · Ders

Girdi Türleri: text, password, email, number ve tel

Her veri alanı için doğru input türünü kullanmayı öğrenin.

Girdi Türleri: text, password, email, number ve tel, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

input Öğesi

<input> öğesi çeşitli form denetimleri oluşturur. type özniteliği denetimin türünü belirler:

<input type="text">      <!-- single-line text -->
<input type="password"> <!-- masked text -->
<input type="email">    <!-- email address -->
<input type="number">   <!-- numeric -->
<input type="tel">      <!-- phone number -->

type=text

Varsayılan input türü — tek satırlı bir metin alanı:

<label for="username">Username</label>
<input
  type="text"
  id="username"
  name="username"
  placeholder="e.g. jane_doe"
  maxlength="50"
  autocomplete="username"
>

type=password

Password input, kullanıcı yazdıkça karakterleri maskeler:

<label for="pwd">Password</label>
<input
  type="password"
  id="pwd"
  name="password"
  minlength="8"
  autocomplete="current-password"
  required
>
<!-- Browser may offer to save/fill the password -->
<!-- autocomplete="new-password" for registration forms -->

type=email

Email input, mobilde ve masaüstünde e-posta biçimini doğrular:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="you@example.com"
  autocomplete="email"
  required
>
<!-- Mobile: shows @ on keyboard -->
<!-- Browser validates basic email format on submit -->

type=number

Number input, artırma ve azaltma denetimleriyle sayısal değerleri kabul eder:

<label for="qty">Quantity</label>
<input
  type="number"
  id="qty"
  name="quantity"
  min="1"
  max="100"
  step="1"
  value="1"
>
<!-- min, max, step control allowed values -->
<!-- Mobile: shows numeric keypad -->
<!-- Note: only integers with step=1; decimals need step="0.01" -->

type=tel

Tel input, biçim doğrulaması yapmadan telefon numaralarını kabul eder:

<label for="phone">Phone number</label>
<input
  type="tel"
  id="phone"
  name="phone"
  placeholder="+1 (555) 555-0100"
  pattern="[+][0-9 ()-]{7,20}"
  autocomplete="tel"
>
<!-- Mobile: shows phone keypad -->
<!-- No built-in validation — phone formats vary globally -->
<!-- Use pattern attribute for format validation -->

name Özniteliği Vazgeçilmezdir

name özniteliği, sunucunun her alanı tanımlamasını sağlar:

<form action="/search">
  <!-- Without name, the field is NOT sent with the form -->
  <input type="text" name="q" placeholder="Search">
  <button type="submit">Search</button>
</form>
<!-- Submits: /search?q=your+search+term -->
<!-- name="q" → the key in the submitted data -->

placeholder ile label Karşılaştırması

placeholder özniteliği örnek metin sağlar — ancak bunu asla label yerine kullanmayın:

<!-- BAD: placeholder as label -->
<input type="text" placeholder="Enter your name">

<!-- GOOD: label + helpful placeholder -->
<label for="name">Full name</label>
<input type="text" id="name" name="name" placeholder="e.g. Jane Smith">
<!-- Placeholder disappears on typing — screen readers often skip it -->

value ve defaultValue

input'lara value özniteliğiyle önceden değer verin:

<input type="text" name="country" value="United States">
<!-- Renders with 'United States' pre-filled -->

<input type="number" name="qty" value="1" min="1" max="10">
<!-- Default quantity of 1 -->

disabled ve readonly

Bir input'u düzenlenemez hâle getirmenin iki yolu:

<input type="text" value="Fixed value" readonly>
<!-- readonly: user can see and select text, but not edit it -->
<!-- Value IS submitted with the form -->

<input type="text" value="Disabled" disabled>
<!-- disabled: user cannot interact with it at all -->
<!-- Value is NOT submitted with the form -->
<!-- NOT in tab order -->

input autocomplete Değerleri

Belirli autocomplete değerleri, tarayıcının otomatik doldurma doğruluğunu artırır:

<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="street" autocomplete="address-line1">
<input type="text" name="city" autocomplete="address-level2">
<input type="text" name="zip" autocomplete="postal-code">
<input type="password" autocomplete="new-password">

Hızlı Kontrol

Telefon numarası alanı için hangi input türünü kullanmalısınız?

Özet: Input Türleri

Yaygın input türleri:

  • type="text" — genel metin (varsayılan)
  • type="password" — maskelenmiş metin; autocomplete="new-password" kullanın
  • type="email" — mobilde @ tuşu bulunan e-posta alanı
  • type="number" — min/max/step özellikleriyle sayısal alan
  • type="tel" — telefon tuş takımına sahip telefon numarası alanı
  • Her zaman name ve ilişkili bir <label> ekleyin

Sıkça Sorulan Sorular

“Girdi Türleri: text, password, email, number ve tel” dersi ücretsiz mi?

Evet — “Girdi Türleri: text, password, email, number ve tel” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Girdi Türleri: text, password, email, number ve tel” dersinde ne öğreneceğim?

Her veri alanı için doğru input türünü kullanmayı öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Girdi Türleri: text, password, email, number ve tel” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. form Öğesi: action, method ve enctype
  2. Girdi Türleri: text, password, email, number ve tel
  3. label Öğesi ve Erişilebilirlik
  4. button Öğesi: submit, reset ve button
← HTML Academy Sayfasına Dön