BAHASA HTML FORM DAN INPUT ATTRIBUT DALAM FORM

TUGAS DASAR INTHERNET DAN DESAIN WEB

A.BAHASA HTML <FORM>

1. THE <FORM> ELEMENT

Adalah suatu element yang menjadikan kata atau kalimat menjadi suatu judul ataupun keterangan untuk tujuan pembuatan form,

<SCRIPT>:

<form>

<

FORMULIR PENDAFTARAN

>

</form>

2. TEXT <INPUT> ELEMENT:

Adalah membuat kolom atau form untuk membuat suatu keterangan.

<SCRIPT>:

<form>

Nama Lengkap:<br>

<input type="text" name="firstname">

<br>

Nama Panggilan:<br>

<input type="text" name="lastname">

<br>

Tempat Lahir:<br>

<input type="text" name="Tempat">

<br>

Tanggal lahir:<br>

<input type="text" name="Tanggal Lahir">

<br>

Alamat :<br>

<input type="text" name="Alamat">

<br>

No Telp :<br>

<input type="text" name="No. telepon">

</form>

3. RADIO BUTTON INPUT:

Adalah membuat keterangan yang dapat dipilih salah satunya seperti membuat jenis kelamin, kendaraan atau yang lainya.

<SCRIPT>

<form>

.

Jenis Kelamin

.

</form>

<form>

<input type="radio" name="sex" value="male" checked>Laki-Laki

<br>

<input type="radio" name="sex" value="female">Perempuan

</form>

4. THE SUBMIT BUTTON:

Adalah menambah input yang akan memproses data.

<SCRIPT>

<form action="action_page.php">

User/E-mail:<br>

<input type="text" name="firstname" value="Chabib28">

<br>

Password:<br>

<input type="text" name="lastname" value="*********">

<br><br>

<input type="submit" value="Selanjutnya">

</form>

5. THE ACTION ATTRIBUTE:

Untuk menunjukkan akan kemana selanjutnya apabila kita meng-klik Selanjutnya.

<SCRIPT>

<form action="action_page.php">

User/E-mail:<br>

<input type="text" name="firstname" value="Chabib28">

<br>

Password:<br>

<input type="text" name="lastname" value="*********">

<br><br>

<input type="submit" value="Selanjutnya">

</form>

Dan apabila kita klik Selanjutnya akan melanjutkan ke link yang kita cantumkan:

6. THE METHOD (GET/POST) ATTRIBUTE:

GET: If the form submission is passive (like a search engine query), and without sensitive information.

POST: If the form is updating data, or includes sensitive information (password).

<SCRIPT>

<form action="action_page.php" method="GET//POST">

User/E-mail:<br>

<input type="text" name="firstname" value="Chabib28">

<br>

Password:<br>

<input type="text" name="lastname" value="*********">

<br><br>

<input type="submit" value="Selanjutnya">

</form>

7. THE NAME ATTRIBUTE:

Adalah suatu input yang melanjutkan ke halaman berikutnya jika terdapat atribut nam, dan apabila tidak terdapat atribut nama maka tidak dapat untuk melanjutkanya.

<SCRIPT>

<form action="action_page.php">

User/E-mail:<br>

<input type="text" value="Chabib28">

<br>

Password:<br>

<input type="text" name="lastname" value="********">

<br><br>

<input type="submit" value="Selanjutnya">

</form>

8. GROUPING FORM DATA WITH <FIELDSET>:

Membuat group atau batasan tertentu pada data yang dimiliki

<SCRIPT>

<form action="action_page.php">

<fieldset>

<legend>AKUN ANDA:</legend>

User:<br>

<input type="text" name="firstname" value="Chabib28">

<br>

Password:<br>

<input type="text" name="lastname" value="********">

<br><br>

<input type="submit" value="Login"></fieldset>

</form>

9. HTML FORM ATTRIBBUTES

<SCRIPT>

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"

enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

.

FORMULIR PENDAFTARAN

.

</form>

B.HTML 5 INPUT

1. COLOR

<SCRIPT>

<form>

MILEH WARNA OPO JAL:

<input type="color" name="favcolor">

</form>

2. DATE

<SCRIPT>

<form>
  Birthday:
  <input type="date" name="bday">
</form>

3. DATETIME

<SCRIPT>

<form>

Birthday (date and time):

<input type="datetime" name="bdaytime">

</form>

4. DATETIME-LOCAL

<form>

Birthday (date and time):

<input type="datetime-local" name="bdaytime">

</form>

5. EMAIL

<SCRIPT>

<form>
  E-mail:
  <input type="email" name="email">
</form>

6. MONTH

SCRIPT>

<form>

BULAN LAN TAHON:

<input type="month" name="bdaymonth">

</form>

7. NUMBER

<SCRIPT>:

<form>

NO ABSEN:

<input type="number" name="quantity" min="1" max="28">

</form>

8. RANGE

<SCRIPT>

<form>

<input type="range" name="points" min="0" max="10">

</form>

9. SEARCH

<SCRIPT>

<form>

GOLEK OPO JAL:

<input type="search" name="googlesearch">

</form>

10. TEL

<SCRIPT>

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

11. TIME

<SCRIPT>

<form>

Select a time:

<input type="time" name="usr_time">

</form>

12. URL

<SCRIPT>

<form>

Add your homepage:

<input type="url" name="homepage">

</form>

13. WEEK

<SCRIPT>

<form>

Select a week:

<input type="week" name="week_year">

</form>

C.HTML 5 ATTRIBUTES

1. autocomplete

<SCRIPT>

<form action="action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

2. autofocus

<SCRIPT>

First name:<input type="text" name="fname" autofocus>

3. form

<SCRIPT>

<form action="action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

4. formaction

<SCRIPT>

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Submit as admin">
</form>

5. formenctype

<SCRIPT>

<form action="demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

6. formmethod

<SCRIPT>

<form action="action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="Submit using POST">
</form>

7. formnovalidate

<SCRIPT>

<form action="action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

8. formtarget

<SCRIPT>

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

9. height and width

<SCRIPT>

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

10. List

<SCRIPT>

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

11. min and max

<SCRIPT>

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

12. multiple

<SCRIPT>

Select images: <input type="file" name="img" multiple>

13. pattern (regexp)

<SCRIPT>

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

14. placeholder

<SCRIPT>

<input type="text" name="fname" placeholder="First name">

15. required

<SCRIPT>

Username: <input type="text" name="usrname" required>

16. step

<SCRIPT>

<input type="number" name="points" step="3">