Cara Membuat Formulir Pendaftaran Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj349ARFR9arhv1E59iHHaRgY1qa60VSTayUi2ytPfd_rZNoSBJrv2_u3KKmh7KoiZt6jzqwVf40_tjD-jWYsNmeRNrhEaC4m-RgeFmQm70MO-IANCTWPPE8iCCPHqCE4UsLS-CSTG8_-gN/s1600/sederhana.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Formulir Pendaftaran Dengan CSS3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj349ARFR9arhv1E59iHHaRgY1qa60VSTayUi2ytPfd_rZNoSBJrv2_u3KKmh7KoiZt6jzqwVf40_tjD-jWYsNmeRNrhEaC4m-RgeFmQm70MO-IANCTWPPE8iCCPHqCE4UsLS-CSTG8_-gN/s1600/sederhana.JPG" title="Cara Membuat Formulir Pendaftaran Dengan CSS3" /></a></div>Cara Membuat Formulir Pendaftaran Dengan CSS3 | Hai, ketemu lagi dengan saya, Wammy. Kali ini, sedikit berbagi tentang CSS3. Lebih tepatnya adalah Formulir Pendataran. Kenapa ? Yups, ini di gunakan pada web dinamis dinama, form ini yang akan mengantar user pada akunnya. Seperti yang teman - teman, baca pada memasukan data dari formulir ke localhost, cara ini juga bisa dipakai untuk membuat Formulir Kontak. Cukup ganti bagian - bagian tertentu saja yang diperlukan. Jika ada yang belum baca, cara koneksi ke localhost. <a href="http://www.bocahit.com/2013/04/menghubungkan-form-ke-database.html" target="_blank">Klik Disini</a>.<br /><br /><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS3, Formulir Pendaftaran</span></h3><br /><pre class="brush:js;">form.registration{<br /> width:600px;<br /> float:left;<br /> color:#818181;<br /> background: #f1f1f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipzq_TcAz9eu2wMAfLGfejflbNx9t2lGKKE2-_DU9R_rrKH4AwO9bCxDQX6t0nuQ4TnGLYfN4-XVMUmsHKYUeMPs1m4sWzqD5p_EmePx4JP_HHLbx-4Dod4ANyBRLZMgC8tGztiar4N99K/s64/pen.png) no-repeat top right;<br /> border: 2px solid #ccc;<br /> padding:10px;<br /> font-family: Georgia;<br /> font-size: 14px;<br /> -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -moz-border-radius: 15px;<br /> -webkit-border-radius: 15px;<br />}<br /><br />form.registration fieldset{<br /> border-top:1px solid #ccc;<br /> border-left:0;<br /> border-bottom:0;<br /> border-right:0;<br /> padding:6px;<br /> margin:0px 30px 0px 0px;<br />}<br /><br />form.registration legend{<br /> text-align:left;<br /> color:#ccc;<br /> font-size:18px;<br /> padding:0px 4px 0px 4px;<br /> margin-left:20px;<br />}<br /><br />form.registration label{<br /> font-size: 32px;<br /> width:200px;<br /> float: left;<br /> text-align: right;<br /> color:#999;<br /> clear:left;<br /> margin:4px 4px 0px 0px;<br /> padding:0px;<br />}<br />form.registration input{<br /> font-family: Georgia;<br /> font-size: 28px;<br /> float:left;<br /> width:300px;<br /> border:1px solid #cccccc;<br /> margin:2px 0px 2px 2px;<br /> color:#00abdf;<br /> height:32px;<br /> padding:3px;<br /> -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br />}<br />form.registration input:focus, form.registration select:focus{<br /> background-color:#E0E6FF;<br />}<br />form.registration select{<br /> font-family: Georgia;<br /> font-size: 28px;<br /> float:left;<br /> border:1px solid #cccccc;<br /> margin:2px 0px 2px 2px;<br /> color:#00abdf;<br /> height:40px;<br /> -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br />}<br /><br />.button, .button:visited{<br /> float:right;<br /> text-shadow: 0 -1px 1px rgba(0,0,0,0.25);<br /> border-bottom: 1px solid rgba(0,0,0,0.25);<br /> cursor: pointer;<br /> padding: 5px 10px 5px 5px;<br /> color: #fff;<br /> text-decoration: none;<br /> font-size: 32px;<br /> padding: 10px 15px;<br /> background-color: #00abdf;<br /> display: inline-block;<br /> -moz-border-radius: 10px;<br /> -webkit-border-radius: 10px;<br /> -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br />}<br />.button:hover{<br /> background-color: #777;<br />}<br /></pre><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">HTML, Formulir Pendaftaran</span></h3><br /><pre class="brush:js;"><form class="registration"><br /> <fieldset><br /> <legend>About you</legend><br /> <label>First name</label><br /> <input type="text" maxlength="100" value=""/> <br /> <label>Last name</label><br /> <input type="text" maxlength="100" value=""/> <br /> <label>Birthdate</label><br /> <select><br /> <option value="1">1</option><br /> <option value="2">2</option> <br /> </select><br /> <select> <br /> <option value="1">January</option><br /> <option value="2">February</option><br /> </select><br /> <select> <br /> <option value="2009">2009</option><br /> <option value="2008">2008</option> <br /> </select> <br /> </fieldset><br /> <fieldset><br /> <legend>Account details</legend><br /> <label>E-Mail</label><br /> <input type="text" maxlength="120" value=""/><br /> <label>Password</label><br /> <input type="password" maxlength="20"/> <br /> </fieldset><br /> <fieldset> <br /> <a class="button">Register</a> <br /> </fieldset> <br /></form><br /></pre><br />Anda bisa letakkan ini, pada halaman blog, atau di Dreamweaver. Silakan lihat contoh dibawah ini....<br /><br /><style type="text/css">form.registration{ width:600px; float:left; color:#818181; background: #f1f1f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipzq_TcAz9eu2wMAfLGfejflbNx9t2lGKKE2-_DU9R_rrKH4AwO9bCxDQX6t0nuQ4TnGLYfN4-XVMUmsHKYUeMPs1m4sWzqD5p_EmePx4JP_HHLbx-4Dod4ANyBRLZMgC8tGztiar4N99K/s64/pen.png) no-repeat top right; border: 2px solid #ccc; padding:10px; font-family: Georgia; font-size: 14px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -moz-border-radius: 15px; -webkit-border-radius: 15px; } form.registration fieldset{ border-top:1px solid #ccc; border-left:0; border-bottom:0; border-right:0; padding:6px; margin:0px 30px 0px 0px; } form.registration legend{ text-align:left; color:#ccc; font-size:18px; padding:0px 4px 0px 4px; margin-left:20px; } form.registration label{ font-size: 32px; width:200px; float: left; text-align: right; color:#999; clear:left; margin:4px 4px 0px 0px; padding:0px; } form.registration input{ font-family: Georgia; font-size: 28px; float:left; width:300px; border:1px solid #cccccc; margin:2px 0px 2px 2px; color:#00abdf; height:32px; padding:3px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; } form.registration input:focus, form.registration select:focus{ background-color:#E0E6FF; } form.registration select{ font-family: Georgia; font-size: 28px; float:left; border:1px solid #cccccc; margin:2px 0px 2px 2px; color:#00abdf; height:40px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; } .button, .button:visited{ float:right; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); cursor: pointer; padding: 5px 10px 5px 5px; color: #fff; text-decoration: none; font-size: 30px; padding: 10px 15px; background-color: #00abdf; display: inline-block; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .button:hover{ background-color: #777; } </style> <br /><form class="registration"><fieldset><legend>About you</legend> <label>First name</label> <input maxlength="100" placeholder="Wammy" type="text" value="" /> <label>Last name</label> <input maxlength="100" placeholder="San" type="text" value="" /> <label>Birthdate</label> <select> <option value="1">1</option> <option value="2">2</option> </select> <select> <option value="1">January</option> <option value="2">February</option> </select> <select> <option value="2009">2009</option> <option value="2008">2008</option> </select> </fieldset><fieldset><legend>Account details</legend> <label>E-Mail</label> <input maxlength="120" placeholder="wammy@bocahit.com" type="text" value="" /> <label>Password</label> <input maxlength="20" placeholder="******" type="password" /> </fieldset><fieldset><a class="button" href="http://www.blogger.com/blogger.g?blogID=6116493370491553443#">Enter</a> </fieldset></form><br /><br/><br/><br/>

Cara Membuat Formulir Pendaftaran Dengan CSS3

Cara Membuat Formulir Pendaftaran Dengan CSS3 | Hai, ketemu lagi dengan saya, Wammy. Kali ini, sedikit berbagi tentang CSS3. Lebih tepatnya adalah Formulir Pendataran. Kenapa ? Yups, ini di gunakan pada web dinamis dinama, form ini yang akan mengantar user pada akunnya. Seperti yang teman - teman, b…

Baca selengkapnya »