นี่คือโค้ดสำหรับการสร้างฟอร์มสมัครรับจดหมายข่าวอีเมล (Email Newsletter) ด้วย CSS
ตัวอย่าง
<!DOCTYPE html> <html> <style> body {font-family: Arial, Helvetica, sans-serif;font-size: 20px;font-weight: bold;} h1{ text-align: center; } form { border: 3px solid #f1f1f1; padding: 20px; background-color: #f3f3f3; max-width: 800px; margin:auto; } input[type=text], input[type=submit] { width: 100%; padding: 12px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; font-size: 30px; } input[type=checkbox] { margin-top: 16px; } input[type=submit] { background-color: rgb(236, 255, 61); color: rgb(0, 0, 0); border: none; font-size: 25px; font-weight: bolder; } input[type=submit]:hover { background-color: rgb(255, 238, 0); } </style> <body> <h1>ตัวอย่าง Email Newsletter</h1> <form> <h2>Subscribe to our Newsletter</h2> <p>Subscribe to our Newsletter to get latest update in the world of technology and web</p> </div> <div> <input type="text" placeholder="Name" name="name" required> <input type="text" placeholder="Email address" name="mail" required> <label> <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter </label> <input type="submit" value="Subscribe"> </form> </body> </html>
ผลลัพธ์
โค้ดจะแสดงผลดังนี้ −
