dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: How can i adjust this form

  1. #1
    Join Date
    Oct 2017
    Location
    ibadan Nigeria
    Posts
    1

    How can i adjust this form

    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


    HTML Code:
    <!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>
    ** added tags **
    Last edited by \\.\; 10-13-2017 at 10:16 AM.

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,425
    Please post code wrapped in forum BB Code tags (as seen in my signature) and please don't post the same question in more than one post or in other forums.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Mar 2012
    Posts
    3,961
    To set the width of the contact form to 50% of the available width, minimum 250px, simply add to the CSS:
    Code:
    #contact-form {
        display: inline-block;
    	/*** added ***/
    	width: 50%;
    	min-width: 250px;
    	/*** end ***/
        padding: 1em;
        ...
    Note: I note your request to restrict the height to 150px, but I do not understand what you gain by that? Anyway, it can be done by adding:
    Code:
     height: 150px;
    overflow: scroll;
    after the width statements.
    Last edited by jedaisoul; 10-13-2017 at 04:06 PM.

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,844

    Code:
    
    <!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;
        border: 0.062em solid #ccc;
        border-radius: 0.75em;
        box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.3 );
        background-color: #fff;
        font-size: 0.8em;
        text-align: left;    
     }
    h1 {
        margin-top: 0;
        font-size: 1.25em;
        text-align: center;
     }
    fieldset {
        padding: 0;
        border: 0;
     }
    label {
        display: inline-block;
        width: 6em;
        margin: 0;
     } 
    input, select, textarea {
        width: 9em;
        border: 0.062em solid #ccc;
        border-radius: 0.25em;
        box-sizing: border-box;
        margin: 0.25em 0;
        color: #565656;
     }
    input[type=submit] { 
        width: auto;
        padding: 0.4em 0.8em;
        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>  
       </fieldset><fieldset>   
      <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>   
      </fieldset><fieldset>
       <label for="day">Day: </label>
       <input id="day" type="text" maxlength="2" name="BirthDay"  placeholder="Day" required>
      </fieldset><fieldset>
       <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"> 
     </fieldset><fieldset>
      <label for="email">Email: </label>
      <input id="email" type="email" name="email" value="" placeholder="you@example.com" required>
     </fieldset><fieldset> 
      <input type="submit" value="submit">
     </fieldset>      
    </form>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,844

    ...also, I think that this...

    Code:
    
      <input id="user-pwd" type="password" name="user-password" 
    ...needs to be...

    Code:
    
      <input id="user-pwd" type="password" name="user-password" required> 

    coothead
    ~ the original bald headed old fart ~

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center