Pasang Iklan and disini

Info Tech News

Info Tech News

Nasional

Artikel

Network

Tutorial

Home tutorial webdesaign Cara Buat Form Registrasi HTML & CSS (1)

Posted by: Unknown Posted date: 14:59:00 / comment : 9

Assalamualaikum Warohmatullahi Wabarokatu.

InfotechBoltim.Org - Pada tutorial pertama saya ini, saya akan membahasa bagaimana cara membuat Form Registrasi menggunakan html dan css.

  1. Yang harus diperhatikan adalah anda harus sudah menginstall Sublime Text, Notepad ++. jika belum punya aplikasi Sublime Text Silahkan download disini via mediafire
  2. Buka aplikasi htm editor: Sublime Text/Notepad ++
Silahkan lihat Kode script html dan css dibawah ini.

html
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>

      <form action="index.html" method="post">
   
        <h1>Sign Up</h1>
     
        <fieldset>
          <legend><span class="number">1</span>Your basic info</legend>
          <label for="name">Name:</label>
          <input type="text" id="name" name="user_name">
       
          <label for="mail">Email:</label>
          <input type="email" id="mail" name="user_email">
       
          <label for="password">Password:</label>
          <input type="password" id="password" name="user_password">
       
          <label>Age:</label>
          <input type="radio" id="under_13" value="under_13" name="user_age"><label for="under_13" class="light">Under 13</label><br>
          <input type="radio" id="over_13" value="over_13" name="user_age"><label for="over_13" class="light">13 or older</label>
        </fieldset>
     
        <fieldset>
          <legend><span class="number">2</span>Your profile</legend>
          <label for="bio">Biography:</label>
          <textarea id="bio" name="user_bio"></textarea>
        </fieldset>
        <fieldset>
        <label for="job">Job Role:</label>
        <select id="job" name="user_job">
          <optgroup label="Web">
            <option value="frontend_developer">Front-End Developer</option>
            <option value="php_developor">PHP Developer</option>
            <option value="python_developer">Python Developer</option>
            <option value="rails_developer"> Rails Developer</option>
            <option value="web_designer">Web Designer</option>
            <option value="WordPress_developer">WordPress Developer</option>
          </optgroup>
          <optgroup label="Mobile">
            <option value="Android_developer">Androild Developer</option>
            <option value="iOS_developer">iOS Developer</option>
            <option value="mobile_designer">Mobile Designer</option>
          </optgroup>
          <optgroup label="Business">
            <option value="business_owner">Business Owner</option>
            <option value="freelancer">Freelancer</option>
          </optgroup>
          <optgroup label="Other">
            <option value="secretary">Secretary</option>
            <option value="maintenance">Maintenance</option>
          </optgroup>
        </select>
     
          <label>Interests:</label>
          <input type="checkbox" id="development" value="interest_development" name="user_interest"><label class="light" for="development">Development</label><br>
            <input type="checkbox" id="design" value="interest_design" name="user_interest"><label class="light" for="design">Design</label><br>
          <input type="checkbox" id="business" value="interest_business" name="user_interest"><label class="light" for="business">Business</label>
     
        </fieldset>
        <button type="submit">Sign Up</button>
      </form>
   
    </body>
</html>


Css
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  color: #384047;
}

form {
  max-width: 300px;
  margin: 10px auto;
  padding: 10px 20px;
  background: #f4f7f8;
  border-radius: 8px;
}

h1 {
  margin: 0 0 30px 0;
  text-align: center;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: #e8eeef;
  color: #8a97a0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 30px;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0 4px 8px 0;
}

select {
  padding: 6px;
  height: 32px;
  border-radius: 2px;
}

button {
  padding: 19px 39px 18px 39px;
  color: #FFF;
  background-color: #4bc970;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #3ac162;
  border-width: 1px 1px 3px;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
  margin-bottom: 10px;
}

fieldset {
  margin-bottom: 30px;
  border: none;
}

legend {
  font-size: 1.4em;
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 8px;
}

label.light {
  font-weight: 300;
  display: inline;
}

.number {
  background-color: #5fcf80;
  color: #fff;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  border-radius: 100%;
}

@media screen and (min-width: 480px) {

  form {
    max-width: 480px;
  }

}

Hasilnya bisa dilihat dibawah ini:
Nantikan untuk tutorial-tutorial selanjutnya dari saya...

Silahkan berikan komentar anda jika ada yang kurang paham dengan pemaparan tutorial diatas...Terima Kasih (Iswanto Mahmud)

Tagged with:

About Unknown

Iswanto Mahmud, Blog ini dibuat agar semua informasi tentang technologi maupun berita lainnya akan dimuat di blog in...
«
Next
Newer Post
»
Previous
Older Post

9 comments:

  1. Anonymous28 May 2016 at 15:11

    Mntapp gan...ijin sharing yaa

    ReplyDelete
  2. Unknown28 May 2016 at 15:14

    Gan apakah file css nya bisa dipisahkan?

    ReplyDelete
    Replies
    1. Unknown28 May 2016 at 15:30

      iya bisa gan...
      caranya buatlah sebuah file baru, terus save as simpan dengan nama style.css setelah agan sudah membuat file css nya silahkan copy kode css yang agan sudah buat sebelumnya yang agan gabung didalam coding html, pastekan di file baru style.css

      setelah itu lihat hasilnya gan...makasih atas pertanyaannya

      Delete
  3. Unknown28 May 2016 at 15:23

    Mantap gan... Akhirnya saya berhasil mengikuti tutorial di blog ini.... Good job mas iswanto sukses terus

    ReplyDelete
  4. Unknown28 May 2016 at 15:23

    This comment has been removed by the author.

    ReplyDelete
  5. Unknown28 May 2016 at 15:23

    This comment has been removed by the author.

    ReplyDelete

Subscribe to: Post Comments (Atom)
⬆
Top