Tekrardan merhabalar serinin 2.bölümüne hoşgeldiniz. Bu hafta yapıcaklarımız biraz daha heyecan verici çünkü Css tarafına biraz daha hakim olmaya başlıyacağız. Eğer hazırsanız başlayalım.

3D render of a cute tropical fish in an aquarium on a dark blue background, digital art.webp

Html web formlarına bağlıdır bu nedenle kullanıcının girdiği bilgileri yakalamak için web formları kullanırız. Web formlarını farklı şeyler için kullanabiliriz örneğin bir web sitesinden kullanıcının oturum açmasını isteyebiliriz. Bunun için bir web formumuz var. Bu web formu kullanıcının e-posta şifre gibi şeyleri tutabilir ve ardından oturumu açar.

Screen Shot 2022-12-30 at 14.46.15.png

Giriş etiketini tam olarak burada görebiliriz. Burası kullanıcı giriş kısmıdır ve burada tipini görebiliriz. Bir öznitelik türü olan etiketin anlamı kullanıcının bir e-posta adresini girmesine ve düzenlemesine izin verir. Bir sürü farklı giriş türü var ve bu hafta bunlardan çoğunlukla bahsedeceğiz.

İlk bölümde bahsettiğim kısımları temizledim ve sıfırdan bir sayfa ile yeni haftaya başlayalım.

<!DOCTYPE html>
<head>
    <title>Learning</title>
</head>
<body>
		<h1> HTML-CSS Learning </h1>
	
    <form>
        <input type="text" id="username">
    </form>

</body>
</html>

"text" metnin girdi alanının türünü tanımlar. Bu kısım daha çok kullanıcıdan beklediğimiz veri kısmıdır. Kullanıcıdan rastgele bir metin türü istediğimiz anlamına gelir. Bu sayfadaki hiçbir öğe aynı kimliğe sahip olamaz bu nedenle örneğin bu kullanıcı adıysa Şimdi gelin nasıl gözüktüğüne hep beraber bakalım.

Screen Shot 2022-12-29 at 17.03.59.png

Bu alana bir etkileşim eklemek istersek bunun için JavaScript kullanabiliriz. Örneğin giriş alanına bir etiket eklemek istiyoruz. Giriş alanında kullanıcının buraya ne yazıcağını bilmiyor. Kullanıcıya bu giriş alanına ne yazıcağını söylemek için bir etiket ekliyoruz.

<form>
      <label for="username">Enter username: </label>
      <input type="text" id="username">
</form>

for kısmında bize buranın hangi giriş alanı olduğunu soruyor. Burada yaptığımız şey bu kullanıcı adı için giriş alanının kimliği olduğunu gösteriyoruz. Bu etiketi giriş alanıyla ilişkilendiriyoruz.

Not: Bir etiketi bir giriş alanı ile ilişkilendirmek istiyorsanız bir kimlik id kullanın.

Şimdi gelin farklı giriş türlerine bakalım.

Önce bir etiket oluşturalım ve sonrasında bir giriş alanı yapalım.

<label for="email">Enter email: </label>
<input type="email" id="email">

Bu bir e posta bilgisi verecek bu yüzden verileri kullanıcıdan email olarak istiyoruz bu nedenle type alanına email türünü belirttik . Bir kullanıcı metin girdiğinde bunun email olup olmadığını kontrol etmemize gerek kalmayacak. Bu nedenle type: email kullandık.

Gelin şimdi birde şifre alanı oluşturalım.

<label for="password">password </label>
<input type="password" id="password">