Giri┼č yap

HTML'de Input Tipleri

Muhtemelen HTML derslerinde en ├žok i┼člevi olan etiketin <input> etiketi oldu─čunu farketmi┼čsinizdir :) ┼×imdi bu etiketin tiplerinin listesine bir bakal─▒m;

  • <input type="text">
  • <input type="password">
  • <input type="submit">
  • <input type="button">
  • <input type="reset">
  • <input type="checkbox">
  • <input type="radio">
  • <input type="hidden">
  • <input type="color">
  • <input type="date">
  • <input type="time">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="image">
  • <input type="week">
  • <input type="month">
  • <input type="number">
  • <input type="range">
  • <input type="search">
  • <input type="tel">
  • <input type="url">

Tip: "text"

Ad─▒ ├╝st├╝nde yaz─▒, herhangi tek sat─▒rl─▒k bir de─čer i├žin kullan─▒l─▒r.

<input type="text">

Tip: "password"

┼×ifrenin yaz─▒ld─▒─č─▒ alanlar bu tipte olur. B├Âylece yaz─▒lan ┼čifrede do─črudan g├Âr├╝nmez.

<input type="password">

Tip: "button"

Normalde form i├žerisinde buton i┼člemlerini <button> etiketi ile g├Âr├╝yoruz ancak input'a button tipi vererekte kullanabiliriz.

<input type="button" value="Giri┼č yap">

Tip: "submit"

T─▒kland─▒─č─▒nda formu g├Ânderen bir buton olu┼čturmak isterseniz bu tipi kullanabilirsiniz.

<input type="submit" value="G├Ânder">

Tip: "reset"

Form etiketi i├žerisinde yap─▒lan i┼člemleri tersine almak yani s─▒f─▒rlamak i├žin bu tip kullan─▒l─▒r.

<input type="reset" value="S─▒f─▒rla">

Tip: "checkbox"

Birden fazla se├žmeli i┼člemler i├žin bu tip kullan─▒l─▒r. ├ľrne─čin kullan─▒c─▒dan hobilerini se├žmesini isteyelim.

<label>
    <input type="checkbox" name="hobi[]" value="Bisiklet"> Bisiklet
</label>
<label>
    <input type="checkbox" name="hobi[]" value="Y├╝r├╝y├╝┼č"> Y├╝r├╝y├╝┼č
</label>
<label>
    <input type="checkbox" name="hobi[]" value="Piyano"> Piyano
</label>

Tip: "radio"

Bir de─čer aras─▒nda se├žim yapt─▒rmak i├žin bu tip kullan─▒l─▒r. ├ľrne─čin kullan─▒c─▒dan cinsiyetini se├žmesini isteyelim;

<label>
    <input type="radio" name="cinsiyet" value="1"> Erkek
</label>
<label>
    <input type="radio" name="cinsiyet" value="2"> Kad─▒n
</label>

Tip: "hidden"

Bazen kullan─▒c─▒ya g├Âz├╝kmeyen ancak formu g├Ânderdi─čimizde gitmesini istedi─čimiz de─čerler olacak. Bu gibi durumlarda g├Âz├╝kmeyen ancak form i├žerisinde g├Ânderildi─činde gitmesi i├žin hidden tipini kullanaca─č─▒z. ├ľrne─čin;

<input type="hidden" name="uye_id" value="3">

Tip: "color"

Renk se├žimi i├žin ├ž─▒kan arac─▒ g├Âstermek i├žin bu tip kullan─▒l─▒r. ├ľrne─čin;

<input type="color" placeholder="Rengi se├žin">

Tip: "date"

Ad─▒ndanda anla┼č─▒laca─č─▒ ├╝zere tarihi se├žtirmek i├žin bu tip kullan─▒l─▒r.

<input type="date" placeholder="Tarihi se├žin">

Tip: "time"

Ad─▒ndanda anla┼č─▒laca─č─▒ ├╝zere saati se├žtirmek i├žin bu tip kullan─▒l─▒r.

<input type="time" placeholder="Saati se├žin">

Tip: "datetime-local"

date ve time tiplerinin yapt─▒─č─▒ i┼či yapar. Yani hem tarihi hem saati se├žtirmek i├žin kullan─▒l─▒r.

<input type="datetime-local">

Tip: "email"

E-posta adresi girilmesini istedi─činiz input'larda bu tipi kullanabilirsiniz. Normalde bilgisayardan bakt─▒─č─▒n─▒zda bir fark g├Âz├╝kmez, ancak ayn─▒ ├Ârne─če telefondan bakarsan─▒z klavyede e-posta i┼člemleri i├žin yard─▒mc─▒ karakterlerin ├ž─▒kt─▒─č─▒n─▒ g├Ârebilirsiniz.

<input type="email" placeholder="E-posta adresiniz..">

Tip: "file"

Dosya se├žtirmek i├žin bu tip kullan─▒l─▒r. ┼×u an resmi se├žtirmek ├žok anlaml─▒ gelmeyebilir, yaz─▒l─▒m derslerinde daha anlaml─▒ gelecek merak etmeyin.

<input type="file" name="resim">

Tip: "image"

Resimli buton yapmak i├žin kullan─▒l─▒r. ├ľrne─čin;

<input type="image" src="https://prototurk.com/upload/img/html_cikti.png">

Tip: "week"

Haftay─▒ se├žtirmek i├žin bu tip kullan─▒l─▒r.

<input type="week" placeholder="Haftay─▒ se├žin">

Tip: "month"

Ay─▒ se├žtirmek i├žin bu tip kullan─▒l─▒r.

<input type="month" placeholder="Ay─▒ se├ž">

Tip: "number"

Say─▒ de─čerlerini almak i├žin bu tip kullan─▒l─▒r.

<input type="number" value="5">

Tip: "range"

─░ki de─čer aras─▒nda bir de─čeri se├žtirmek i├žin bu tip kullan─▒l─▒r. Min. ve max. de─čerleri belirtilerek kullan─▒l─▒r. ├ľrne─čin;

<input type="range" min="0" max="10">

Tipi text olandan tek fark─▒, bir ┼čeyler yaz─▒ld─▒─č─▒nda silmek i├žin sa─č tarafta bir ikon ├ž─▒kart─▒yor. Buda arama kutular─▒nda kullan─▒lacak bir tip :)

<input type="search" placeholder="Konularda ara..">

Tip: "tel"

Telefon numaras─▒ al─▒nacak yerler i├žin bu tip kullan─▒l─▒r. ├ľrne─čin;

<input type="tel" placeholder="Telefon numaran─▒z">

Bunada mobilde bakarsan─▒z klavyenin sadece say─▒lardan olu┼čtu─čunu g├Ârebilirsiniz.

Tip: "url"

Web adresini almak i├žin bu tip kullan─▒l─▒r. Telefonda da yine klavyede baz─▒ yard─▒mc─▒ karakterlerin gelmesini sa─člar. ├ľrne─čin;

<input type="url" placeholder="Web adresiniz">

Bu kullan─▒mlar ┼ču an size bir ┼čey ifade etmeyebilir. ├ľrne─čin tipini number yapt─▒─č─▒m─▒zda hala harf karakter vs. girdi─čimizi g├Ârebilirsiniz. Bunlar─▒n kontrol├╝ javascript taraf─▒nda yap─▒lacak ancak input etiketi i├žerisinde required niteli─či kullan─▒l─▒rsa ve bu etiketler form i├žerisinde ise, form g├Ânderilmeden ├Ânce hepsinin do─črulu─ču kontrol ettirilir. ├ľrne─čin;

<form action="" method="post">
        
    <input type="email" required placeholder="E-posta adresiniz" name="eposta"> <br>
    <input type="password" required placeholder="┼×ifreniz"> <br>
    <input type="url" required placeholder="Web site adresiniz"> <br>
    
    <button type="submit">G├Ânder</button>
        
</form>
Tayfun Erbilen
11 g├╝n ├Ânce yazd─▒. Son g├╝ncelleme: 11 g├╝n ├Ânce