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
| 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"> |
| <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 :
Referensi :
https://html.spec.whatwg.org/multipage/forms.html#input-type-attr-summary
tag: html, belajar html,
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.
0 comments:
Post a Comment