Monday, February 29, 2016

Kategori: ,

Beberapa Contoh Elemen Input Text Yang Terbaru Dari HTML5

html tutorial


Tobi Web ID Tempatnya Cari Source Code Toko Online, Source Code Aplikasi PHP, Berbasis PHP dan MySQl, Source code CodeIgniter, Pengelolaan Data dengan Codeigniter, Contoh Program dengan PHP, Source Code eCommerce, Source Code dengan Laravel, cek source code website, source code toko online, source code toko online dengan php mysql


Pada postingan artikel kali ini ialah tentang beberapa contoh elemen input baru HTML5, Berikut ini adalah contoh kode pada halaman HTML 5 dengan elemen masukan baru, dengan memiliki visual yang baru dan memiliki set minimum sifat didefinisikan sehingga untuk mendapatkan nuansa bagaimana standar HTML baru yang datang dan lebih fres. Fitur ini juga akan memberi kita sebuah gambaran baru tentang bagaimana perubahan ini akan menambah pengalaman sobat setelah menerapkan di halaman web yang baru.

Mari kita mulai dengan menentukan dan memulai Dukumentasi HTML 5 jenis seperti yang ditunjukkan di bawah ini.


<!DOCTYPE html>

Pada saat menulis kode dibawah ini ialah jenis elemen inputan yang tersedia. Sebagian besar jenis elemen inputan yang baru hanya didukung di browser Google Chrome.


Google Chrome

Berikut beberapa elemen tersebut :

Keyword State Usage
search Search <input type="search">
number Number <input type="number">
range Range <input type="range">
color Color <input type="color">
tel Telephone <input type="tel">
url URL <input type="url">
email E-mail <input type="email">
date Date <input type="date">
month Month <input type="month">
week Week <input type="week">
time Time <input type="time">
datetime Date and Time <input type="datetime">
datetime-local Local Date and Time <input type="datetime-local">


Berikut adalah contoh kode HTML salah satu fitur dasar dari control Inputan baru diperkenalkan. Demi kesederhanaan dan kemudahan.

Berikut contoh kodenya


<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>HTML5 Sample Page</title>
<style type="text/css">
body
{
    font-family:Arial;
    font-size:12px;
}
</style>
</head>
<body>
<form id="form1" method="post">
Search:
<input type="search" placeholder="Search text here">
<p></p>
Number:
<input type="number" value="50" min="40" max="60" step="5" autofocus="true">
<p></p>
Range:
<input type="range" value="50" min="40" max="60" step="5">
<p></p>
Color:
<input type="color" value="#000000">
<p></p>
Telephone:
<input type="tel" placeholder="999" pattern="[0-9][A-Z]{3}" title="A part number is a digit followed by three uppercase letters.">
<p></p>
URL:
<input type="url" value="http://www.google.com">
<p></p>
Email:
<input type="email" multiple value="me@somewhere.com">
<p></p>
Date:
<input type="date" max="2050-12-31" min="2000-01-01" value="2010-01-01">
<p></p>
Date Time (Time zone information included):
<input type="datetime" value="2000-12-31T00:00+05:30">
<p></p>
Local Date Time (No Time Zone information):
<input type="datetime-local" value="2000-12-1T00:00">
<p></p>
Month:
<input type="month" max="2000-10" min="2000-02" value="2000-04" step="2">
<p></p>
Week:
<input type="week" max="2000-W50" min="2000-W05" value="2000-W06" step="2">
<p></p>
Time:
<input type="time" max="23:00:00" min="01:00:00" value="04:30:00" step="5">
<p></p>
File Upload:
<input type="file" accept="image/*" name="image" multiple onchange="updateFilename(this.value)">
<p></p>
<input type="submit" value="Submit"/>
<p></p>
</form>
</body>
</html>

Silahkan copy kode diatas, lalu simpan di folder project sobat. misalnya htmltest.html lalu simpan di dalam folder htdocs/test. Lalu buka pada Browser Google Chrome, Beginilah hasilnya :


Biginilah tampilannya, lebih mudah dan simple bukan, silahkan copy dan praktekan, lalu dipercantik sesuai dengan kebutuhan, Terima Kasih semoga bermanfaat.

Referensi :

https://html.spec.whatwg.org/multipage/forms.html#input-type-attr-summary


tag: html, belajar html, 

Tobi Muhammad

Author & Editor

Tobi (Muhammad Tobi) adalah seorang Tukang Masak di perusahaan startup, suka sekali menulis dan mempelajari source code open source lisensi GNU di Github dll. Bisa pemrogramman web karena sering belajar dari contoh program yang ada di Github dll. Anak desa yang hanya lulusan Paket C.

0 comments:

Post a Comment

 

News Letters

Subscribe here to get our newsletter in your inbox, it is safe and EASY!

Tobi Web Indonesia