FORM CSS Oleh Ahmad Ramadhani S Kom Tag

  • Slides: 18
Download presentation
FORM & CSS Oleh : Ahmad Ramadhani, S. Kom

FORM & CSS Oleh : Ahmad Ramadhani, S. Kom

Tag Form <form> <!– Isi Form --> </form> Contoh. Jenis Form: <form action="dani. php"

Tag Form <form> <!– Isi Form --> </form> Contoh. Jenis Form: <form action="dani. php" method="get"> <form action="dani. php" method=“post">

Tag Input • Input type=text First name: <input type="text" name="firstname"> Last name: <input type="text"

Tag Input • Input type=text First name: <input type="text" name="firstname"> Last name: <input type="text" name="lastname"> • Input type=password Password: <input type="password" name="pwd">

Tag Input • Input type=radio <input type="radio" name="sex" value="male">Male <input type="radio" name="sex" value="female">Female •

Tag Input • Input type=radio <input type="radio" name="sex" value="male">Male <input type="radio" name="sex" value="female">Female • Input type=checkbox <input type="checkbox" name="vehicle" value="Bike">I have a bike <input type="checkbox" name="vehicle" value="Car">I have a car

Attribut Input Tag

Attribut Input Tag

Tag Select <select name="jenis_mobil"> <option value="volvo">Volvo</option <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> Atribut

Tag Select <select name="jenis_mobil"> <option value="volvo">Volvo</option <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> Atribut Tag Select.

Tag Optgroup <select name="mobil"> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German

Tag Optgroup <select name="mobil"> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> Atribut.

Tag Label <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"> <label for="female">Female</label> <input type="radio" name="sex"

Tag Label <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"> <input type="submit" value="Submit">

Tag Textarea <textarea name="textarea" > <!– Isi --> </textarea> Attribut.

Tag Textarea <textarea name="textarea" > <!– Isi --> </textarea> Attribut.

Tag Fieldset <fieldset> <legend>Personalia: </legend> Name: <input type="text"> Email: <input type="text"> Date of birth:

Tag Fieldset <fieldset> <legend>Personalia: </legend> Name: <input type="text"> Email: <input type="text"> Date of birth: <input type="text"> </fieldset> Attribut.

Button Tag <button type="button">Click Me!</button> Attribut.

Button Tag <button type="button">Click Me!</button> Attribut.

KUIS • Sebutkan Tag yang digunakan dalam pembuatan form! Sebanyak yang kalian tahu. Nilai=25

KUIS • Sebutkan Tag yang digunakan dalam pembuatan form! Sebanyak yang kalian tahu. Nilai=25 • Apa fungsi attribut id? Jelaskan! Nilai=15 • Apa fungsi attribut name? Jelaskan! Nilai=15 • Bagaimana cara pembuatan form login ? Tuliskan source codenya! Nilai=20 ; sempurna nilai =35 Total Nilai=90.

CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet)

Metode Penulisan CSS • Inline Style sheet • Embedded Style Sheet • Linked Style

Metode Penulisan CSS • Inline Style sheet • Embedded Style Sheet • Linked Style Sheet

Inline Style Sheet CSS didefinisikan langsung pada tag 2 html yang bersangkutan. Contoh penulisannya

Inline Style Sheet CSS didefinisikan langsung pada tag 2 html yang bersangkutan. Contoh penulisannya dengan menambahkan attribut style=“. . . ” dalam tag 2 html tersebut. Contoh.

Embedded Style Sheet CSS didefinisikan terlebih dulu dalam tag <style>. . . </style>sebelum tag

Embedded Style Sheet CSS didefinisikan terlebih dulu dalam tag <style>. . . </style>sebelum tag <body>. Contoh.

CSS Id dan Class • CSS Id • CSS Class

CSS Id dan Class • CSS Id • CSS Class

Linked Style Sheet CSS akan didefinisikan dalam bentuk file. css Untuk memanggil file css,

Linked Style Sheet CSS akan didefinisikan dalam bentuk file. css Untuk memanggil file css, harus dipanggil dengan menggunakan tag <link> di antara tag <head>. . . </head> Contoh.