HTML, CSS ve JavaScript Kullanarak Basit Bir İletişim Formu Nasıl Oluşturulur

İletişim formları, web sitelerinin önemli bir bileşenidir ve kullanıcıların size sorular, geri bildirimler veya isteklerle ulaşmasını sağlar.

Burada web siteniz için temel bir iletişim formu oluşturma sürecini öğreneceksiniz. Projenin kurulumundan form doğrulama ve stil eklemeye kadar, sonunda işlevsel ve hoş bir iletişim formuna sahip olmanızı sağlar.

Projenin Kurulumu

Kodlamaya başlamadan önce geliştirme ortamınızın kurulduğundan emin olun. Tercih ettiğiniz metin düzenleyiciyi açın veya Önerilen entegre geliştirme ortamlarından (IDE'ler) biri beğenmek Visual Studio Kodu veya Yüce metin.

HTML ve CSS dosyalarınızı düzenli tutmak için bir proje klasörü oluşturun.

Bu klasörde HTML için ayrı dosyalar oluşturun (indeks.html) ve CSS (stil.css). Son olarak, CSS dosyanızı HTML belgenizin bölümünü kullanarak etiket.

HTML Yapısını Oluşturmak

Herhangi bir iletişim formunun temeli HTML yapısıdır. İletişim formunuz için gerekli HTML öğelerini nasıl oluşturabileceğiniz aşağıda açıklanmıştır.

<main>
<h1>Welcome to my Formh1>
<formid="form">
<divclass="input__container">
<labelfor="name">Namelabel>

<inputtype="text"id="name"name="name"required />
div>
<divclass="input__container">
<labelfor="email">Emaillabel>
<inputtype="email"id="email"name="email"required />
div>
<divclass="input__container">
<labelfor="message">Messagelabel>
<textareaid="message"name="message"rows="4"required>textarea>
div>
<button>Submitbutton>
form>
main>

Yukarıdaki HTML kodu bir form öğesi oluşturur ve iletişim formu için kullanıcı girişlerini almak amacıyla birden fazla giriş alanını iç içe geçirir.

Şu anda iletişim formunuz şöyle görünüyor:

Çekici ve kullanıcı dostu bir iletişim formu, genel kullanıcı deneyimini geliştirir. Aşağıdaki CSS kodu, daha iyi bir görünüm elde etmek amacıyla iletişim formuna stil vermek için dolgu ve kenar boşluğu gibi flexbox ve CSS kutu modeli özelliklerini kullanır.

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html {
 font-size: 62.5%;
}
body {
 font-family: "Mulish", sans-serif;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}
main {
 width: 40rem;
 box-shadow: 2px 3px 5pxrgba(0, 0, 0, 0.2);
 margin: 0 auto;
 height: 45rem;
 border-radius: 2rem;
 padding: 2rem;
}
h1 {
 text-align: center;
 font-size: 3rem;
 padding: 1rem 2rem;
}
form {
 margin: 3rem 0;
 display: flex;
 flex-direction: column;
 row-gap: 2rem;
}
.input__container {
 display: flex;
 flex-direction: column;
 row-gap: 0.5rem;
}
.input__containerlabel { font-size: 1.6rem; }
.input__containerinput,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1pxsolid#555;
 resize: none;
}
button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
}

İletişim formunuz artık şöyle görünüyor:

Form Doğrulamanın Uygulanması

Kullanıcı tarafından sağlanan bilgilerin doğruluğunun ve eksiksizliğinin sağlanması çok önemlidir. Etkili bir yaklaşım şunları içerir: istemci tarafı form doğrulaması için JavaScript kullanma. Başlamak için HTML dosyanızın sonunda bir komut dosyası etiketi oluşturun ve form öğesini hedefleyin.