Create HTML 5 And CSS3 Form

Kali ini kita akan membuat sebuah form dengan menggunakan beberapa elemen baru pada HTML 5 salah satunya adalah input type berupa email. Input type berupa email akan menolak saat kita memasukkan format email yang tidak tepat pada kotak tersebut. Format yang diminta selalu mengharuskan adanya tanda “@”. Misalnya alamat email harus ditulis dengan lengkap seperti : tanto@kangtanto.com. Form yang akan kita buat nantinya akan tampak seperti gambar berikut ini.

hasil form html 5 dan css3

Penulisan input type email seperti berikut ini:

<input type="email" name="email_anda" id="email_anda" />

Selain input type berupa email, kita akan menambahkan jenis input lainnya yaitu url. Seperti pada contoh kode HTML di bawah ini:

<input type="url" id="user_url" name="user_url" />

Input jenis url akan meminta user memasukkan alamat domain atau sub domain. Jenis input terakhir yang juta pakai adalah bertipe required. Contoh penulisannya seperti di bawah ini

<input type="required" id="nama_anda" name="nama_anda" />

Input jenis ini akan mewajibkan user untuk mengisi kotak tersebut. Apabila kotak input masih kosong, maka form pada saat disubmit akan mengeluarkan peringatan. Untuk membuat form HTML 5 ini, silahkan anda ketikkan script di bawah ini pada editor HTML anda.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id="pembungkus">
<span id="sembunyikan">Sembunyikan Form</span>
<span id="tampilkan" style="display:none;">Tampilkan Form</span>
<span id="miringkan">Miringkan Form</span>
<span id="zoom">Zoom Form</span>
<div id="formbiodata">
	<h1>Data <span>Biodata</span> Pengguna</h1>
	<form action="#" method="post">
	<input type="text" name="nama" id="nama" value="Nama Anda" />
    <label for="nama">Nama Anda </label>
	<input type="email" name="user_email" id="email" />
	<label for="email">E-mail: </label>
	
   <input type="url" name="user_url" id="url" />
   <label for="url">Web </label>
   
   <input list="browsers" />

   <datalist id="browsers">
  		<option value="Internet Explorer">
  		<option value="Firefox">
  		<option value="Google Chrome">
  		<option value="Opera">
  		<option value="Safari">
  </datalist> 
  <label for="browsers">Browser yang anda gunakan </label>
  
  <input type="text" name="username" required="required" id="username" /> 
  <label for="username">Username * </label>
	<div class="clear"></div>
<input type="submit" class="button" value="Kirim" />
	
</form>
</div>
</div>
</body>
</html>

Selanjutnya agar form anda tampil menarik, silahkan anda ketikkan CSS dibawah ini. CSS yang kita pakai kali ini sebagian merupakan CSS3. Misalnya untuk membuat rounded corner. Akan tetapi beberapa browser versi lama belum mendukung style ini.

body {
    background-color: #f9f9f9;
    color: #222;
    font-family: Cantarell, Verdana, sans-serif;
    font-size: 12px;
}


input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; } 
input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

.clear { clear: both; }

#formbiodata {
    width: 654px;
    height: 450px;
    margin: 20px auto;
    padding: 50px 0;
    border-radius:10px;
    -moz-border-radius:10px;/*untuk firefox versi 3.5 ke bawah*/
    box-shadow:10px 10px 5px #888888;
    border:1px solid #FFF;
    overflow: hidden;
    position: relative;
    
}

#formbiodata input, #formbiodata select {
        background: url('images/input.png') no-repeat;
        color: #888;
        border: 1px solid #ccc;
        font-family: Cantarell, Verdana, sans-serif;
        font-weight: bold;
        font-size: 15px;
        width: 300px;
        height: 35px;
        padding: 0 25px;
        margin: 20px 0;
        float: left;
        
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
}

 #formbiodata input.button {
    background: none repeat scroll 0 0 #A3D62F;
    border: 1px solid #3B6E22;
    border-radius: 8px 8px 8px 8px;
    color: #FFFFFF;
    cursor: pointer;
    width: 85px;
    height: 38px;
    position: relative;
    bottom: 15px;
    left: 575px;
    width: 70px;
}

#formbiodata label {
        color: #666;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
        float: right;
        margin: 23px -25px;
        width: 270px;
}

#formbiodata h1, #formbiodata h2 {
        font-size: Verdana, sans-serif;
        text-align: center;
        font-size: 24px;
        text-shadow: 1px 1px 2px #222;
    }
#formbiodata h1 span { color: #a90329; }

Sementara itu dulu terkait pembuatan form sederhana ini. Tahap selanjutnya kita bisa menambahkan Jquery atau yang lainnya. Ada usul?

 

 

Incoming search terms:

Be Sociable, Share!

Related Posts:

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *