Pertemuan 12
Cover
Melanjutkan pembelajaran tentang teknologi web dan pengembangan website.
Gallery
Contact Form
📝 Contact Form HTML
<
form
>
< label >Name:</ label >
< input type= "text" placeholder= "Your name" required>
< label >Email:</ label >
< input type= "email" placeholder= "your@email.com" required>
< label >Message:</ label >
< textarea placeholder= "Your message..." rows= "5" ></ textarea >
< button type= "submit" >Send Message</ button >
</ form >
< label >Name:</ label >
< input type= "text" placeholder= "Your name" required>
< label >Email:</ label >
< input type= "email" placeholder= "your@email.com" required>
< label >Message:</ label >
< textarea placeholder= "Your message..." rows= "5" ></ textarea >
< button type= "submit" >Send Message</ button >
</ form >
Form Elements:
label (keterangan), input (nama/email), textarea (pesan panjang), button (submit)
Form Input Styling
🎨 Form Input Styling
input, textarea
{
width : 100% ;
padding : 12px ;
margin : 10px 0 ;
border : 1px solid #ddd ;
border-radius : 4px ;
font-family : inherit ;
}
/* Focus state */
input:focus, textarea:focus {
outline : none ;
border-color : #667eea ;
box-shadow : 0 0 5px rgba(102,126,234,0.3) ;
}
width : 100% ;
padding : 12px ;
margin : 10px 0 ;
border : 1px solid #ddd ;
border-radius : 4px ;
font-family : inherit ;
}
/* Focus state */
input:focus, textarea:focus {
outline : none ;
border-color : #667eea ;
box-shadow : 0 0 5px rgba(102,126,234,0.3) ;
}
Button Styling
✨ Button Styling
button[type="submit"]
{
background-color : #667eea ;
color : white ;
padding : 12px 30px ;
border : none ;
border-radius : 4px ;
cursor : pointer ;
transition : 0.3s ;
}
button:hover {
background-color : #5568d3 ;
}
background-color : #667eea ;
color : white ;
padding : 12px 30px ;
border : none ;
border-radius : 4px ;
cursor : pointer ;
transition : 0.3s ;
}
button:hover {
background-color : #5568d3 ;
}
Form Example
💬 Complete Form Section
Contoh form yang siap pakai di website:
<
section
class=
"contact"
>
< h2 >Contact Me</ h2 >
< form action= "" >
/* form elements here */
</ form >
</ section >
< h2 >Contact Me</ h2 >
< form action= "" >
/* form elements here */
</ form >
</ section >
Tips:
Form bisa submit ke email via
mailto:
atau connect ke backend service
Activity
🎯 Your Activity
-
Add contact form to site
Input: name, email, message. Button: Send -
Style inputs & textarea
Padding, border, border-radius, focus state dengan blue border -
Style button
Blue background, white text, hover effect, cursor:pointer -
Test form
Click inputs (focus state), hover button, test responsiveness