Scribd
Unggah
52 tayangan32 halaman

Panduan Membuat Tabel HTML Lengkap

Dokumen tersebut membahas tentang penggunaan tabel dalam HTML dengan menjelaskan tag-tag dasar tabel, cara membuat border pada tabel, menambahkan padding dan spacing, membuat header horizontal dan vertikal, menambahkan caption, serta menggunakan colspan dan rowspan untuk menggabungkan sel-sel tabel.

Diunggah oleh

febri herwandi
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
52 tayangan32 halaman

Panduan Membuat Tabel HTML Lengkap

Dokumen tersebut membahas tentang penggunaan tabel dalam HTML dengan menjelaskan tag-tag dasar tabel, cara membuat border pada tabel, menambahkan padding dan spacing, membuat header horizontal dan vertikal, menambahkan caption, serta menggunakan colspan dan rowspan untuk menggabungkan sel-sel tabel.

Diunggah oleh

febri herwandi
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

MATERI PEMBELAJARAN 1

HTML (HYPERTEXT MARKUP LANGUAGE)


Pertemuan ke-3

Tujuan :
1. Membuat tabel menggunakan HTML
2. Membuat borders pada tabel
3. Membuat ukuran pada tabel
4. Membuat header pada table
5. Membuat padding & Spacing pada tabel
6. Membuat Colspan & Rowspan pada tabel
7. Membuat Table Styling
8. Membuat Table Colgrup

A. Tag Table HTML

Tag Description
<table> Mendefinisikan tabel
<th> Mendefinisikan sel header dalam tabel
<tr> Mendefinisikan baris dalam tabel
<td> Mendefinisikan sel dalam tabel
<caption> Mendefinisikan judul tabel
<colgroup> Menentukan grup dari satu atau lebih kolom dalam tabel untuk pemformatan
<col> Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
<thead> Mengelompokkan konten header dalam sebuah tabel
<tbody> Mengelompokkan konten isi dalam tabel
<tfoot> Mengelompokkan konten footer dalam tabel

B. Dasar HTML Tabel

<!DOCTYPE html>
<html>
<body>
<h2>Dasar HTML Tabel</h2>
<hr>
<h2>Satu Kolom:</h2>
<table>
<tr>
<td>100</td>
</tr>
</table>
<hr>
<h2>Satu Baris dan Tiga Kolom:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<hr>
<h2>Tiga Baris dan Tiga Kolom:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>700</td>
<td>800</td>
<td>900</td>
</tr>
</table>
<hr>
</body>
</html>

Hasilnya :
C. Membuat border pada tabel

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Membuat Border atau Batas pada Tabel</h2>
<p>Gunakan property border CSS untuk membuat border pada tabel</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>NIDN</th>
</tr>
<tr>
<td>Dandi</td>
<td>Sunardi</td>
<td>0201088101</td>
</tr>
</table>
</body>
</html>

Hasilnya :
D. Membuat Border Collapse
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Collapse Border </h2>
<p>Dengan menggunakan collapse border maka garis hanya akan tampak
satu</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>NIDN</th>
</tr>
<tr>
<td>Dandi</td>
<td>Sunardi</td>
<td>0201088101</td>
</tr>
</table>
</body>
</html>

Hasilnya :
E. Table Padding & Spacing

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>NIDN</th>
</tr>
<tr>
<td>Dandi</td>
<td>Sunardi</td>
<td>0201088101</td>
</tr>
</table>
<p>Try to change the padding to 5px.</p>
</body>
</html>

Hasilnya :
F. Membuat Rataan Kiri Teks Heading pada Tabel (default heading “center”)
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th, td {
text-align:;
}
</style>
</head>
<body>
<h2>Rataan Kiri pada Headings</h2>
<p>Untuk Rataan Kiri Teks pada Heading, harus menggunakan elemen CSS text-align
</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>NIDN</th>
</tr>
<tr>
<td>Dandi</td>
<td>Sunardi</td>
<td>0201088101</td>
</tr>
</table>
</body>
</html>

Hasilnya :
G. Horizontal/Vertical table headings

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Horizontal Headings:</h2>
<table style="width:100%">
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>Telephone</th>
</tr>
<tr>
<td>Dandi Sunardi</td>
<td>Kampung Bali</td>
<td>085377105566</td>
</tr>
</table>
<h2>Vertical Headings:</h2>
<table style="width:100%">
<tr>
<th>Nama:</th>
<td>Dandi Sunardi</td>
</tr>
<tr>
<th>Alamat:</th>
<td>Kampung Bali</td>
</tr>
<tr>
<th>Telephone:</th>
<td>085377105566</td>
</tr>
</table>
</body>

</html>
H. Membuat Caption Tabel

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag</p>
<table style="width:100%">
<caption>Alamat Dosen</caption>
<tr>
<th>Nama Dosen</th>
<th>Alamat</th>
</tr>
<tr>
<td>Dandi Sunardi</td>
<td>Kampung Bali</td>
</tr>
<tr>
<td>Solehan</td>
<td>Kampung Bali</td>
</tr>
</table>
</body>
</html>
I. Membuat Cell Span untuk Kolom menggunakan “colspan”

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute</p>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Dandi Sunardi</td>
<td>085377105566</td>
<td>085300000000</td>
</tr>
</table>
</body>
</html>
J. Membuat Cell Span untuk Rows menggunakan “rowspan”

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table style="width:100%">
<tr>
<th>Nama:</th>
<td>Dandi Sunardi</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>085377105566</td>
</tr>
<tr>
<td>085300000000</td>
</tr>
</table>
</body>
</html>

A. HTML FORMS
1. Form with text input
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>

2. Form with radio button input


<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
</body>
</html>

3. Form with text fields and a submit button


<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>

4. Form with a text fields without a name attribute


<!DOCTYPE html>
<html>
<body>
<h2>The name Attribute</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<p>Notice that the value of the "First name" field will not be submitted, because the input element does
not have a name attribute.</p>
</body>
</html>

5. Grouping Form Data


<!DOCTYPE html>
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the legend element defines a caption
for the fieldset element.</p>
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>

B. HTML FORM ELEMENTS


1. A simple drop-down list
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>

2. A drop-down list with a pre-selected value


<!DOCTYPE html>
<html>
<body>
<h2>Pre-selected Option</h2>
<p>You can preselect an option with the selected attribute:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>

3. A textarea (a multi-line text input field)


<!DOCTYPE html>
<html>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form action="/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>

4. An input button
<!DOCTYPE html>
<html>
<body>
<h2>The button Element</h2>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>

5. Using the <datalist> Element


<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>
</body>
</html>

6. Using the <output> Element


<!DOCTYPE html>
<html>
<body>
<h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p>
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>
</body>
</html>

C. HTML INPUT TYPES


1. Input type text
<!DOCTYPE html>
<html>
<body>
<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
2. Input type password
<!DOCTYPE html>
<html>
<body>
<h2>Password field</h2>
<p>The <strong>input type="password"</strong> defines a password field:</p>
<form action="/action_page.php">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">
</form>
<p>The characters in a password field are masked (shown as asterisks or circles).</p>
</body>
</html>

3. Input type radio


<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<p>The <strong>input type="radio"</strong> defines a radio button:</p>
<form action="/action_page.php">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

4. Input type checkbox


<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

5. Input type button


<!DOCTYPE html>
<html>
<body>
<h2>Input Button</h2>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</body>
</html>

6. Input type number - with restrictions


<!DOCTYPE html>
<html>
<body>
<h2>Number Field</h2>
<p>The <strong>input type="number"</strong> defines a numeric input field.</p>
<p>You can use the min and max attributes to add numeric restrictions in the input field:</p>
<form action="/action_page.php">
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input type="submit" value="Submit">
</form>
</body>
</html>

7. Input type number - with steps


<!DOCTYPE html>
<html>
<body>
<h2>Numeric Steps</h2>
<p>Depending on browser support: Fixed steps will apply in the input field.</p>
<form action="/action_page.php">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
<input type="submit" value="Submit">
</form>
</body>
</html>

8. Input type date - with date picker


<!DOCTYPE html>
<html>
<body>
<h2>Date Field</h2>
<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>
<form action="/action_page.php">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> type="date" is not supported in Safari or Internet Explorer 11 (or earlier).</p>
</body>
</html>

9. Input type date - with restrictions


<!DOCTYPE html>
<html>
<body>
<h2>Date Field Restrictions</h2>
<p>Use the min and max attributes to add restrictions to dates:</p>
<form action="/action_page.php">
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> type="date" is not supported in Safari or Internet Explorer 11 (or earlier).</p>
</body>
</html>

10. Input type color - with color picker


<!DOCTYPE html>
<html>
<body>
<h2>Show a Color Picker</h2>
<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>
<form action="/action_page.php">
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
<input type="submit" value="Submit">
</form>
<p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).</p>
</body>
</html>

11. Input type range


<!DOCTYPE html>
<html>
<body>
<h2>Range Field</h2>
<p>Depending on browser support: The input type "range" can be displayed as a slider control.<p>
<form action="/action_page.php" method="get">
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
<input type="submit" value="Submit">
</form>
</body>
</html>

12. Input type month


<!DOCTYPE html>
<html>
<body>
<h2>Month Field</h2>
<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>
<form action="/action_page.php">
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> type="month" is not supported in Firefox, Safari, or Internet Explorer 11 (or
earlier).</p>
</body>
</html>

13. Input type week


<!DOCTYPE html>
<html>
<body>
<h1>Display a Week Input Control</h1>
<p>The <strong>input type="week"</strong> allows the user to select a week and year.</p>
<p>If the browser supports it, a date picker pops up when entering the input field.</p>
<form action="/action_page.php">
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> type="week" is not supported in Firefox, Safari or Internet Explorer 11 (or
earlier).</p>
</body>
</html>
14. Input type time
<!DOCTYPE html>
<html>
<body>
<h1>Show a Time Input Control</h1>
<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>
<p>If the browser supports it, a time picker pops up when entering the input field.</p>
<form action="/action_page.php">
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> type="time" is not supported in Safari or Internet Explorer 12 (or earlier).</p>
</body>
</html>

15. Input type datetime


<!DOCTYPE html>
<html>
<body>
<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>
<form action="/action_page.php">
Birthday (date and time):
<input type="datetime" name="bdaytime">
<input type="submit">
</form>
<p><b>Note:</b> type="datetime" is not supported in Chrome, Firefox, or Internet Explorer.</p>
</body>
</html>
16. Input type datetime-local
<!DOCTYPE html>
<html>
<body>
<h2>Local Date Field</h2>
<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time
zone.</p>
<form action="/action_page.php">
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> type="datetime-local" is not supported in Firefox, Safari or Internet Explorer
12 (or earlier).</p>
</body>
</html>

17. Input type email


<!DOCTYPE html>
<html>
<body>
<h2>Email Field</h2>
<p>The <strong>input type="email"</strong> is used for input fields that should contain an e-mail
address:</p>
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>

18. Input type search


<!DOCTYPE html>
<html>
<body>
<h2>Search Field</h2>
<p>The <strong>input type="search"</strong> is used for search fields (behaves like a regular text
field):</p>
<form action="/action_page.php">
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
<input type="submit" value="Submit">
</form>
</body>
</html>
19. Input type tel

<!DOCTYPE html>
<html>
<body>
<h2>Telephone Field</h2>
<p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone
number:</p>
<form action="/action_page.php">
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-
9]{3}" required><br><br>
<small>Format: 123-45-678</small><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

20. Input type url


<!DOCTYPE html>
<html>
<body>
<h1>Display a URL Input Field</h1>
<p>The <strong>input type="url"</strong> is used for input fields that should contain a URL address:</p>
<form action="/action_page.php">
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
<input type="submit" value="Submit">
</form>
</body>
</html>

D. HTML INPUT ATTRIBUTES


1. The autocomplete attribute

<!DOCTYPE html>
<html>
<body>
<h1>The autocomplete attribute</h1>
<p>The autocomplete attribute specifies whether or not an input field should have autocomplete
enabled.</p>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field!</p>
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

2. The novalidate attribute

<!DOCTYPE html>
<html>
<body>
<h1>The form novalidate attribute</h1>
<p>The novalidate attribute specifies that the form data should not be validated when submitted.</p>
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> The novalidate attribute of the form tag is not supported in Safari 10 (or
earlier).</p>
</body>
</html>

3. The autofocus_attribute

<!DOCTYPE html>
<html>
<body>
<h1>The input autofocus attribute</h1>
<p>The autofocus attribute specifies that the input field should automatically get focus when the page
loads.</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

4. The form attribute

<!DOCTYPE html>
<html>
<body>
<h1>The input form attribute</h1>
<p>The form attribute specifies the form an input element belongs to.</p>
<form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<p>The "Last name" field below is outside the form element, but still part of the form.</p>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
</body>
</html>

5. The formaction attribute

<!DOCTYPE html>
<html>
<body>
<h1>The input formaction attribute</h1>
<p>The formaction attribute specifies the URL of a file that will process the input when the form is
submitted.</p>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
</body>
</html>

6. The formenctype attribute

<!DOCTYPE html>
<html>
<body>
<h1>The input formenctype attribute</h1>
<p>The formenctype attribute specifies how the form data should be encoded when submitted.</p>
<form action="/action_page_binary.asp" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>
</body>
</html>

7. The formmethod attribute

<!DOCTYPE html>
<html>
<body>
<h1>The input formmethod Attribute</h1>
<p>The formmethod attribute defines the HTTP method for sending form-data to the action URL.</p>
<form action="/action_page.php" method="get" target="_blank">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
</body>
</html>

8. The formnovalidate attribute

<!DOCTYPE html>
<html>
<body>

<h1>The input formnovalidate attribute</h1>


<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>
<p><strong>Note:</strong> The formnovalidate attribute of the input tag is not supported in Safari 10 (or
earlier).</p>
</body>
</html>

9. The formtarget attribute


<!DOCTYPE html>
<html>
<body>
<h1>The input formtarget attribute</h1>
<p>The formtarget attribute specifies a name or a keyword that indicates where to display the response
that is received after submitting the form.</p>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
</body>
</html>

10. The height and width attributes

<!DOCTYPE html>
<html>
<body>
<h1>The input height and width attributes</h1>
<p>The height and width attributes specify the height and width of an input type="image" element.</p>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that activated the
image button.</p>
</body>
</html>

11. The list attribute


<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
Webpage: <input type="url" list="url_list" name="link">
<datalist id="url_list">
<option label="W3Schools" value="https://www.w3schools.com">
<option label="Google" value="http://www.google.com">
<option label="Microsoft" value="http://www.microsoft.com">
</datalist>
<input type="submit">
</form>
</body>
</html>
12. The min and max attributes

<!DOCTYPE html>
<html>
<body>
<h1>The input min and max attributes</h1>
<p>The min and max attributes specify the minimum and maximum values for an input element.</p>
<form action="/action_page.php">
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
13. The multiple attribute
<!DOCTYPE html>
<html>
<body>
<h1>The input multiple attributes</h1>
<p>The multiple attribute specifies that the user is allowed to enter more than one value in an input
field.</p>
<form action="/action_page.php">
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple><br><br>
<input type="submit" value="Submit">
</form>
<p>To select multiple files, hold down the CTRL or SHIFT key while selecting.</p>
</body>
</html>
14. The pattern attribute

<!DOCTYPE html>
<html>
<body>
<h1>The input pattern attribute</h1>
<p>The pattern attribute specifies a regular expression that the input element's value is checked
against.</p>
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter
country code"><br><br>
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Safari 10 (or
earlier).</p>
</body>
</html>
15. The placeholder attribute
<!DOCTYPE html>
<html>
<body>
<h1>The input placeholder attribute</h1>
<p>The placeholder attribute specifies a short hint that describes the expected value of an input
field.</p>
<form action="/action_page.php">
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-
9]{3}"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
16. The required attribute

<!DOCTYPE html>
<html>
<body>
<h1>The input required attribute</h1>
<p>The required attribute specifies that an input field must be filled out before submitting the form.</p>
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Safari prior version
10.1.</p>
</body>
</html>
17. The step attribute
<!DOCTYPE html>
<html>
<body>
<h1>The input step attribute</h1>
<p>The step attribute specifies the legal number intervals for an input element.</p>
<form action="/action_page.php">
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
<input type="submit" value="Submit">
</form>
</body>

</html>

K. Sumber
- https://www.w3schools.com/
- https://www.petanikode.com/
- https://www.codepolitan.com/
- https://dosenit.com/jaringan-komputer/internet/pengertian-internet-menurut-ahli
- https://www.brilio.net/wow/50-pantun-nasihat-islami-penuh-makna-dan-mendidik-
210616u.html
- https://jambi.kemenag.go.id/news/8001/puasa-ramadhan-itu-madrasah.html
- https://www.infohpmurah.com/2018/08/31-contoh-puisi-islami-menyentuh-hati.html

Anda mungkin juga menyukai