3 Replies - 377 Views - Last Post: 13 October 2017 - 08:33 AM

#1 KAYONE  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-October 17

HELP ADJUST THIS FORM

Posted 12 October 2017 - 10:29 AM

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="[email protected]" required>
 </fieldset><fieldset> 
  <input type="submit" value="submit">
 </fieldset>      
</form>

</body>
</html>
:code:

This post has been edited by modi123_1: 12 October 2017 - 11:25 AM
Reason for edit:: In the future, please use the [code] tag button in the editor.


Is This A Good Question/Topic? 0
  • +

Replies To: HELP ADJUST THIS FORM

#2 KAYONE  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-October 17

Re: HELP ADJUST THIS FORM

Posted 13 October 2017 - 07:06 AM

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="[email protected]" required>
 </fieldset><fieldset> 
  <input type="submit" value="submit">
 </fieldset>      
</form>

</body>
</html>
:code:

This post has been edited by modi123_1: 13 October 2017 - 07:08 AM

Was This Post Helpful? 0
  • +
  • -

#3 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13493
  • View blog
  • Posts: 53,899
  • Joined: 12-June 08

Re: HELP ADJUST THIS FORM

Posted 13 October 2017 - 07:08 AM

Merging duplicate topics.

Please remember to use the 'code' tag button in the editor.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6380
  • View blog
  • Posts: 25,775
  • Joined: 12-December 12

Re: HELP ADJUST THIS FORM

Posted 13 October 2017 - 08:33 AM

You only have the form, no other content, so to get it to the bottom right could be with fixed or absolute positioning, or use of a table or flexbox. You've mentioned a flexbox but there is no flexbox code in your posted code?! If this is your intention then please include your attempt to use a flexbox.

However, is it worth the trouble to place it in the bottom-right corner whilst you have no other content to associate, or align, it with?

"it looks cool but it takes the whole page" It doesn't on my screen, it's about 2/5th width.

"around 250px x 150 pix really half the width of the page preferably" If you want it be smaller then set about making all the form controls have suitable, smaller, size. You can also constrain the form to a width, or maximum width, which could be a percentage.

Currently, you are just providing a wish list, we need to see your attempt to fulfil these wishes, or, at least, a specific question.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1