October 13, 20178 yr Hello i need help on the coding with the following contact form.. i like the overall appearance it looks cool but it takes the whole page it might help if it could be around 250px x 150 pix really half the width of the page preferably .. i don't want it to stretch to the whole width of the page. Really i want it to be aligned to the right of the page in the bottom corner in flex layout with out the field sets. i have tried some efforts on my own which is shown below but i just cant get it done properplly <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"><title>My Example</title><link rel="stylesheet" href="screen.css" media="screen"><style media="screen">body {background-color: #f0f0f0;font: 1em/1.5em verdana, arial, helvetica, sans-serif;color: #565656;text-align: right;}#contact-form {display: inline-block;padding: 1em;margin: 0.5em;border: 0.062em solid #ccc;border-radius: 0.75em;box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );background-color: #fff;text-align: left;}h1 {margin-top: 0;font-size: 1.25em;text-align: center;}fieldset {padding: 0.5em;margin: 0.25em 0;border: 0.062em solid #ccc;border-radius: 0.5em;background-color: #fefefe;}label {margin: 0 0.5em;}input, select, textarea {padding: 0.75em;border: 0.062em solid #ccc;border-radius: 0.25em;box-sizing: border-box;margin: 0.5em 0;}input[type=submit] {padding: 0.75em 1.25em;border: 0;border-radius: 0.25em;background-color: #4CAF50;color: #fff;cursor: pointer;}input[type=submit]:hover {background-color: #45a049;}</style></head><body><form id="contact-form" action="#" method="post"><h1>contact form</h1><fieldset><label for="name">Name: </label><input id="name" type="text" name="First name" value="" placeholder="e.g mark" required><label for="telephone">Telephone: </label><input id="telephone" type="tel" name="telephone" value=""></fieldset><fieldset><label for="month">Birthday: </label><select id="month" name="BirthMonth"><option value="">Month</option><option value="01">January</option><option value="02">February</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select><label for="day">Day: </label><input id="day" type="text" maxlength="2" name="BirthDay" placeholder="Day" required><label for="year">Year: </label> <input id="year" type="text" maxlength="4" name="BirthYear" placeholder="Year" required></fieldset><fieldset><label for="gender">Gender: </label><select id="gender" name="gender"><option value="select">i am..</option><option value="m">Male</option><option value="f">Female</option><option value="others">Other</option></select></fieldset><fieldset><label for="city">City:</label><select id="city" name="city"><option value="sydney">Sydney</option><option value="melbourne">Melbourne</option><option value="cromwell">Cromwell</option></select> </fieldset><fieldset><label for="user-pwd">Password:</label><input id="user-pwd" type="password" name="user-password"><label for="email">Email: </label><input id="email" type="email" name="email" value="" placeholder="kaygenesis@genesis.com" required></fieldset><fieldset><input type="submit" value="submit"></fieldset></form></body></html>
Create an account or sign in to comment