Dandi - Modul HTML - Tabel Dan Form

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-collapse: collapse;
}
</style>
</head>
<body>
<h2>Collapse Border </h2>
<p>Dengan menggunakan collapse border maka garis hanya akan tampak
satu</p>
<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 {
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<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 {
}
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>
<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 {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Horizontal Headings:</h2>
<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>
<tr>
<th>Nama:</th>
</tr>
<tr>
<th>Alamat:</th>
</tr>
<tr>
<th>Telephone:</th>
<td>085377105566</td>
</tr>
</table>
</body>
</html>
H. Membuat Caption Tabel
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
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>
<caption>Alamat Dosen</caption>
<tr>
<th>Nama Dosen</th>
<th>Alamat</th>
</tr>
<tr>
</tr>
<tr>
<td>Solehan</td>
</tr>
</table>
</body>
</html>
I. Membuat Cell Span untuk Kolom menggunakan “colspan”
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
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>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<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 {
}
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>
<tr>
<th>Nama:</th>
</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">
<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>
<input type="text" id="fname" value="John"><br><br>
</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>
<fieldset>
<legend>Personalia:</legend>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</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>
<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>
<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>
</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>
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
</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>
<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>
</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>
</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>
<input type="text" id="fname" name="fname"><br>
<input type="text" id="lname" name="lname"><br><br>
</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>
<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>
</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>
<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>
</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>
<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>
</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>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</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>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</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>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</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>
<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>
</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>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
</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">
</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>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</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>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</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>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</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>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</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>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</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>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</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>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</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>
<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>
</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>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</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>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
</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>
<input type="email" id="email" name="email" required><br><br>
</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>
<input type="text" id="fname" name="fname" autofocus><br>
</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">
</form>
<p>The "Last name" field below is outside the form element, but still part of the form.</p>
<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>
<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">
<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">
<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>

<input type="email" id="email" name="email" required><br><br>
<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>
<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>
<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>
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>
</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>
<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>
</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>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple><br><br>
</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>
<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>
</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>
<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>
</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>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</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>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</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

Dandi - Modul HTML - Tabel Dan Form

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Dandi - Modul HTML - Tabel Dan Form

Diunggah oleh

Hak Cipta:

Format Tersedia

MATERI PEMBELAJARAN 1

HTML (HYPERTEXT MARKUP LANGUAGE)

A. Tag Table HTML

B. Dasar HTML Tabel

2. Form with radio button input

3. Form with text fields and a submit button

4. Form with a text fields without a name attribute

5. Grouping Form Data

B. HTML FORM ELEMENTS

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

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

5. Using the <datalist> Element

6. Using the <output> Element

C. HTML INPUT TYPES

3. Input type radio

4. Input type checkbox

5. Input type button

6. Input type number - with restrictions

7. Input type number - with steps

8. Input type date - with date picker

9. Input type date - with restrictions

10. Input type color - with color picker

11. Input type range

12. Input type month

13. Input type week

15. Input type datetime

17. Input type email

18. Input type search

20. Input type url

D. HTML INPUT ATTRIBUTES

2. The novalidate attribute

4. The form attribute

5. The formaction attribute

6. The formenctype attribute

7. The formmethod attribute

8. The formnovalidate attribute

<h1>The input formnovalidate attribute</h1>

9. The formtarget attribute

10. The height and width attributes

11. The list attribute

Anda mungkin juga menyukai