FORM CSS Oleh Ahmad Ramadhani S Kom Tag


















- Slides: 18

FORM & CSS Oleh : Ahmad Ramadhani, S. Kom

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" 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 • 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

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 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" id="female" value="female"> <input type="submit" value="Submit">

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: <input type="text"> </fieldset> Attribut.

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

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)

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 dengan menambahkan attribut style=“. . . ” dalam tag 2 html tersebut. Contoh.

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

CSS Id dan Class • CSS Id • CSS Class

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.