HTML Form Örnekleri

Site ziyaretçisinden bazı veriler toplamak istediğinizde HTML Formları gerekir. Örneğin, kullanıcı kaydı sırasında ad, e-posta adresi, kredi kartı vb. Bilgileri toplamak istiyorsunuz.

Bir form site ziyaretçisinden girdi alacak ve daha sonra CGI, ASP Script veya PHP betiği gibi bir arka uç uygulamasına gönderecektir. Arka uç uygulaması, içinde tanımlanmış iş mantığına dayanan geçirilen veriler üzerinde gerekli işlemleri gerçekleştirecektir. uygulama.

Metin alanları, textarea alanları, açılır menüler, radyo düğmeleri, onay kutuları vb. gibi çeşitli form öğeleri vardır.

HTML Form Örnekleri

Aşağıdaki form örnek resimleri ve HTML kodları ile HTML Form çalışmanıza yardımcı olacaktır.

HTML Kod:


        <form action="http://www.hnkbilisim.net/form-bilgi.php" enctype="multipart/form-data">
            <h1>ABC Tasarım Programı Kurulum ve Satış Sözleşmesi :)</h1>
            <fieldset>
                <legend>Sözleşme Onay</legend>
                <label><input type="checkbox" required>Aşağıdaki bilgilerin doğruluğunu kabul ediyorum ve sözleşmeyi onaylıyorum.</label><br>
                <input type="submit" value="Formu Kaydet">
                <input type="reset" value="Formu Temizle">
            </fieldset>
            <fieldset>
                <legend>Kişisel Bilgiler</legend>
                <table width="350">
                    <tr>
                        <td>Form Güvenlik ID</td>
                        <td><input type="text" id="gid" name="gid" value="asdfgh" disabled></td>
                    </tr>
                    <tr>
                        <td>Ad</td>
                        <td><input type="text" id="ad" name="ad" placeholder="Adınızı girin" required></td>
                    </tr>
                    <tr>
                        <td>Soyad</td>
                        <td><input type="text" id="soyad" placeholder="Adınızı girin" name="soyad" required></td>
                    </tr>
                    <tr>
                        <td>Yaş</td>
                        <td><input type="number" min="20" max="100" id="yas" name="yas"></td>
                    </tr>
                    <tr>
                        <td>Mail Adresi</td>
                        <td><input type="email" id="eposta" name="eposta" required></td>
                    </tr>
                    <tr>
                        <td>Fotoğraf Ekle</td>
                        <td><input type="file" id="fotom" name="fotom"></td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend>Diğer Bilgiler</legend>
                <table width="350">
                    <tr>
                        <th colspan="2">Buradaki alanlar Mesleki Deneyimi Kapsar</th>
                    </tr>
                    <tr>
                        <td>Sektöre Giriş Tarihi</td>
                        <td>
                            <input type="date" name="tarih" id="tarih" value="2010-01-01">
                        </td>
                    </tr>
                    <tr>
                        <td>Sektör Deyimi</td>
                        <td>
                        <label><input type="radio" name="deneyim">1 - 5 yıl</label><br>
                        <label><input type="radio" name="deneyim">6 - 10 yıl</label><br>
                        <label><input type="radio" name="deneyim">11 - 15 yıl</label><br>
                        <label><input type="radio" name="deneyim">15 üzeri yıl</label>
                        </td>
                    </tr>
                    <tr>
                        <td>Programlama Dilleri</td>
                        <td>
                            <select name="dil" id="dil" multiple size="5">
                                <option>C#</option>
                                <option selected>PHP</option>
                                <option>Java</option>
                                <option>Python</option>
                                <option>JavaScript</option>
                                <option>C++</option>
                                <option>C</option>
                                <option>Pascal</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend>Sözleşme Kopyası</legend>
                <textarea id="kopya" name="kopya" rows="5" readonly cols="50" >Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</textarea>
            </fieldset>
            <fieldset>
                <legend>Mail Listesi</legend>
                Mail listesine katılmak <b>istiyorum</b><input type="radio" name="liste" checked><br>
                Mail listesine katılmak <b><u>istemiyorum</u></b><input type="radio" name="liste">
            </fieldset>
        </form>

<h1>ABC Tasarım Programı Kurulum ve Satış Sözleşmesi :)</h1>

<legend>Sözleşme Onay</legend>

<label><input type="checkbox" required>Aşağıdaki bilgilerin doğruluğunu kabul ediyorum ve sözleşmeyi onaylıyorum.</label><br>

</fieldset>

<legend>Kişisel Bilgiler</legend>

<tr>

<td>Form Güvenlik ID</td>

</tr>

<tr>

</tr>

<tr>

<td>Soyad</td>

</tr>

<tr>

</tr>

<tr>

<td>Mail Adresi</td>

</tr>

<tr>

<td>Fotoğraf Ekle</td>

</tr>

</table>

</fieldset>

<legend>Diğer Bilgiler</legend>

<tr>

<th colspan="2">Buradaki alanlar Mesleki Deneyimi Kapsar</th>

</tr>

<tr>

<td>Sektöre Giriş Tarihi</td>

<td>

</td>

</tr>

<tr>

<td>Sektör Deyimi</td>

<td>

<label><input type="radio" name="deneyim">15 üzeri yıl</label>

</td>

</tr>

<tr>

<td>Programlama Dilleri</td>

<td>

<option>Python</option>

<option>JavaScript</option>

<option>Pascal</option>

</select>

</td>

</tr>

</table>

</fieldset>

<legend>Sözleşme Kopyası</legend>

<textarea id="kopya" name="kopya" rows="5" readonly cols="50" >Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</textarea>

</fieldset>

<legend>Mail Listesi</legend>

Mail listesine katılmak <b>istiyorum</b><input type="radio" name="liste" checked><br>

Mail listesine katılmak <b><u>istemiyorum</u></b><input type="radio" name="liste">

</fieldset>

</form>

CSS ile birlikte HTML Form Oluşturmak isterseniz aşağıdaki örnek size fikir verecektir.


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>FORM KONTROL</title>
        <style>
        
            @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
            * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              -webkit-font-smoothing: antialiased;
              -moz-font-smoothing: antialiased;
              -o-font-smoothing: antialiased;
              font-smoothing: antialiased;
              text-rendering: optimizeLegibility;
            }

            body {
              font-family: "Roboto", Helvetica, Arial, sans-serif;
              font-weight: 100;
              font-size: 12px;
              line-height: 30px;
              color: #777;
              background: #ac3d3d;
            }

            .container {
              max-width: 400px;
              width: 100%;
              margin: 0 auto;
              position: relative;
            }

            #contact input[type="text"],
            #contact input[type="email"],
            #contact input[type="tel"],
            #contact input[type="url"],
            #contact textarea,
            #contact button[type="submit"] {
              font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
            }

            #contact {
              background: #F9F9F9;
              padding: 25px;
              margin: 150px 0;
              box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
            }

            #contact h3 {
              display: block;
              font-size: 30px;
              font-weight: 300;
              margin-bottom: 10px;
            }

            #contact h4 {
              margin: 5px 0 15px;
              display: block;
              font-size: 13px;
              font-weight: 400;
            }

            fieldset {
              border: medium none !important;
              margin: 0 0 10px;
              min-width: 100%;
              padding: 0;
              width: 100%;
            }

            #contact input[type="text"],
            #contact input[type="email"],
            #contact input[type="tel"],
            #contact input[type="url"],
            #contact textarea {
              width: 100%;
              border: 1px solid #ccc;
              background: #FFF;
              margin: 0 0 5px;
              padding: 10px;
            }

            #contact input[type="text"]:hover,
            #contact input[type="email"]:hover,
            #contact input[type="tel"]:hover,
            #contact input[type="url"]:hover,
            #contact textarea:hover {
              -webkit-transition: border-color 0.3s ease-in-out;
              -moz-transition: border-color 0.3s ease-in-out;
              transition: border-color 0.3s ease-in-out;
              border: 1px solid #aaa;
            }

            #contact textarea {
              height: 100px;
              max-width: 100%;
              resize: none;
            }

            #contact button[type="submit"] {
              cursor: pointer;
              width: 100%;
              border: none;
              background: #4CAF50;
              color: #FFF;
              margin: 0 0 5px;
              padding: 10px;
              font-size: 15px;
            }

            #contact button[type="submit"]:hover {
              background: #43A047;
              -webkit-transition: background 0.3s ease-in-out;
              -moz-transition: background 0.3s ease-in-out;
              transition: background-color 0.3s ease-in-out;
            }

            #contact button[type="submit"]:active {
              box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
            }

            .copyright {
              text-align: center;
            }

            #contact input:focus,
            #contact textarea:focus {
              outline: 0;
              border: 1px solid #aaa;
            }

            ::-webkit-input-placeholder {
              color: #888;
            }

            :-moz-placeholder {
              color: #888;
            }

            ::-moz-placeholder {
              color: #888;
            }

            :-ms-input-placeholder {
              color: #888;
            }

        </style>
    </head>
    <body>
    <div class="container">  
      <form id="contact" action="" method="post">
        <h3>Tasarım Kodlama</h3>
        <h4>İletişim Formu</h4>
        <fieldset>
          <input placeholder="Adınız" type="text" tabindex="1" required autofocus>
        </fieldset>
        <fieldset>
          <input placeholder="Soyadınız" type="email" tabindex="2" required>
        </fieldset>
        <fieldset>
          <input placeholder="Telefon(İsteğe bağlı)" type="tel" tabindex="3" required>
        </fieldset>
        <fieldset>
          <input placeholder="Web Sitesi(İsteğe bağlı)" type="url" tabindex="4" required>
        </fieldset>
        <fieldset>
          <textarea placeholder="Mesajınızı girin...." tabindex="5" required></textarea>
        </fieldset>
        <fieldset>
          <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Kaydı Gönder.</button>
        </fieldset>
      </form>
    </div>
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

<!doctype html>

<html>

<head>

<title>FORM KONTROL</title>

<style>

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);

* {

margin: 0;

padding: 0;

box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-font-smoothing: antialiased;

-moz-font-smoothing: antialiased;

-o-font-smoothing: antialiased;

font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

body {

font-family: "Roboto", Helvetica, Arial, sans-serif;

font-weight: 100;

font-size: 12px;

line-height: 30px;

color: #777;

background: #ac3d3d;

}

.container {

max-width: 400px;

width: 100%;

margin: 0 auto;

position: relative;

}

#contact input[type="text"],

#contact input[type="email"],

#contact input[type="tel"],

#contact input[type="url"],

#contact textarea,

#contact button[type="submit"] {

font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;

}

#contact {

background: #F9F9F9;

padding: 25px;

margin: 150px 0;

box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

}

#contact h3 {

display: block;

font-size: 30px;

font-weight: 300;

margin-bottom: 10px;

}

#contact h4 {

margin: 5px 0 15px;

display: block;

font-size: 13px;

font-weight: 400;

}

fieldset {

border: medium none !important;

margin: 0 0 10px;

min-width: 100%;

padding: 0;

width: 100%;

}

#contact input[type="text"],

#contact input[type="email"],

#contact input[type="tel"],

#contact input[type="url"],

#contact textarea {

width: 100%;

border: 1px solid #ccc;

background: #FFF;

margin: 0 0 5px;

padding: 10px;

}

#contact input[type="text"]:hover,

#contact input[type="email"]:hover,

#contact input[type="tel"]:hover,

#contact input[type="url"]:hover,

#contact textarea:hover {

-webkit-transition: border-color 0.3s ease-in-out;

-moz-transition: border-color 0.3s ease-in-out;

transition: border-color 0.3s ease-in-out;

border: 1px solid #aaa;

}

#contact textarea {

height: 100px;

max-width: 100%;

resize: none;

}

#contact button[type="submit"] {

cursor: pointer;

width: 100%;

border: none;

background: #4CAF50;

color: #FFF;

margin: 0 0 5px;

padding: 10px;

font-size: 15px;

}

#contact button[type="submit"]:hover {

background: #43A047;

-webkit-transition: background 0.3s ease-in-out;

-moz-transition: background 0.3s ease-in-out;

transition: background-color 0.3s ease-in-out;

}

#contact button[type="submit"]:active {

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);

}

.copyright {

text-align: center;

}

#contact input:focus,

#contact textarea:focus {

outline: 0;

border: 1px solid #aaa;

}

::-webkit-input-placeholder {

color: #888;

}

:-moz-placeholder {

color: #888;

}

::-moz-placeholder {

color: #888;

}

:-ms-input-placeholder {

color: #888;

}

</style>

</head>

<body>

<h3>Tasarım Kodlama</h3>

<h4>İletişim Formu</h4>

</fieldset>

</fieldset>

</fieldset>

</fieldset>

</fieldset>

<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Kaydı Gönder.</button>

</fieldset>

</form>

</div>

</body>

</html>

HTML Form Örnekleri

HTML Form Örnekleri

Yorum Yap

İptal Et

HTML Form Örnekleri

Bunları da beğenebilirsiniz

Yorum Yap