Sabtu, 24 November 2018

"Cara Membuat Formulir Pengajuan Judul Dengan CSS dan HTML Notepad"

Edit Posted by with 1 comment
Langkah-langkahnya adalah :
1. Buka Notepad di komputer anda. mempermudah pencarian klik search lalu ketik Notepad
2. Copy semua kode HML dibawah ini :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FORMULIR PENGAJUAN JUDUL</title>
</head><style type="text/css">

.form-style-3{
max-width: 450px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-3 label{
display:block;
margin-bottom: 10px;
}
.form-style-3 label > span{
float: left;
width: 100px;
color: #F072A9;
font-weight: bold;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
}
.form-style-3 fieldset{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
margin: 0px 0px 10px 0px;
border: 1px solid #FFD2D2;
padding: 20px;
background: #FFF4F4;
box-shadow: inset 0px 0px 15px #FFE5E5;
-moz-box-shadow: inset 0px 0px 15px #FFE5E5;
-webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
}
.form-style-3 fieldset legend{
color: #FFA0C9;
border-top: 1px solid #FFD2D2;
border-left: 1px solid #FFD2D2;
border-right: 1px solid #FFD2D2;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
background: #FFF4F4;
padding: 0px 8px 3px 8px;
box-shadow: -0px -1px 2px #F1F1F1;
-moz-box-shadow:-0px -1px 2px #F1F1F1;
-webkit-box-shadow:-0px -1px 2px #F1F1F1;
font-weight: normal;
font-size: 12px;
}
.form-style-3 textarea{
width:300px;
height:100px;
}
.form-style-3 input[type=text],
.form-style-3 input[type=date],
.form-style-3 input[type=datetime],
.form-style-3 input[type=number],
.form-style-3 input[type=search],
.form-style-3 input[type=time],
.form-style-3 input[type=url],
.form-style-3 input[type=email],
.form-style-3 select, 
.form-style-3 textarea{
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: 1px solid #FFC2DC;
outline: none;
color: #F072A9;
padding: 5px 8px 5px 8px;
box-shadow: inset 1px 1px 4px #FFD5E7;
-moz-box-shadow: inset 1px 1px 4px #FFD5E7;
-webkit-box-shadow: inset 1px 1px 4px #FFD5E7;
background: #FFEFF6;
width:50%;

}
.form-style-3  input[type=submit],
.form-style-3  input[type=button]{
background: #EB3B88;
border: 1px solid #C94A81;
padding: 5px 15px 5px 15px;
color: #FFCBE2;
box-shadow: inset -1px -1px 3px #FF62A7;
-moz-box-shadow: inset -1px -1px 3px #FF62A7;
-webkit-box-shadow: inset -1px -1px 3px #FF62A7;
border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-weight: bold;
}
.form-style-3 .required{
color:red;
font-weight:normal;
}
</style>
<img src="gambar.png" align="right"/>
<body>
<h1>FORMULIR PENGAJUAN JUDUL</h1>
<table border="0" style="center;
color:#00000">
<div class="form-style-3">
<form>
<fieldset><legend>DATA PRIBADI</legend>
  <label for="field1"><span>NAMA<span class="required">*</span></span><input type="text" class="input-field" name="field1" value="" /></label>
  <label for="field2"><span>NIM<span class="required">*</span></span><input type="text" class="input-field" name="field2" value="" /></label>
  <label for="field1"><span>ALAMAT<span class="required">*</span></span><input type="text" class="input-field" name="field1" value="" /></label>
  <label for="field4"><span>EMAIL<span class="required">*</span></span><input type="EMAIL" class="input-field" name="field4" value="" /></label>
  <label for="field1"><span>NO HP<span class="required">*</span></span><input type="text" class="input-field" name="field1" value="" /></label>
  <label for="field6"><span>JURUSAN<span class="required">*</span></span><input type="text" class="input-field" name="field6" value="" /></label>
  <label for="field7"><span>JENIS KELAMIN</span><select name="field7" class="select-field">
  <option value="LAKI-LAKI">LAKI-LAKI</option>
  <option value="PEREMPUAN">PEREMPUAN</option>
</select></label>
  <label for="field7"><span>KAJIAN</span><select name="field7" class="select-field">
  <option value="SISTEM INFORMASI MANAJEMEN">SISTEM INFORMASI MANAJEMEN</option>
  <option value="SISTEM PENGAMBILAN KEPUTUSAN">SISTEM PENGAMBILAN KEPUTUSAN</option>
  <option value="PERENCANAAN STRATEGI">PERENCANAAN STRATEGI</option>
  <option value="TOTAL QUALITY MANAJEMEN">TOTAL QUALITY MANAJEMEN</option>
</select></label>
</fieldset>
<fieldset><legend>JUDUL TESIS</legend>
  <label for="field8"><span>JUDUL <span class="required">*</span></span><textarea name="field8" class="textarea-field"></textarea></label>
 </select></label>
</fieldset>
<fieldset><legend>ABSTRAKSI TESIS</legend>
  <label for="field8"><span>ABSTRAK <span class="required">*</span></span><textarea name="field8" class="textarea-field"></textarea></label> 
<label><span>&nbsp;</span><input type="submit" value="KIRIM"/></label>
</fieldset>
</form>
</div>
</body>
</html>

3. Pada halaman Notepad Pilih File lalu klik Save As
4. Rubah file nama sesuai keinginan anda jangan lupa untuk menggunakan akhiran .html pada file tersebut. misalkan nama file sebagai berikut: contoh1.html
5. Pada bagian save as type pilih All files
6. Pada bagian Econding pastikan yang dipilih adalah ANSI
7. Kemudian klik Save
setelah selesai klik file yang telah dibuat sehingga akan menampilkan Tampilan seperti ini



SELAMAT MENCOBA....

1 komentar: