Posts

Showing posts with the label form

unit3.online registration form tricks: input field box align right and placeholder text right, but input text left.

-
Image
TrickA: align the input field box to right 1. make the input field to right  the trick is: not float input field to right, you need to give the label margin-right:auto;  then push the input field to right .      .container label{          margin-right:auto; } 2. but after that, the label is not level with input filed. you have to fix it with: .container label{     justify-content:center;     align-self:center; } then you will see the perfect picture: 3. but not end, you will find new issue: the postcode area is also pushed to right, and the project require the postcode field short than others. you will need a little math to fix it: for example:  your input area width is 80%;  label is 15%,  100-80-15=5 then you can set 5% between by: label[for="postcode"]{ margin-right:5% } after that, you will get perfect picture. TrickB the place holder text showing on the right. you can simply align the text to right...
Post a Comment
Read more

Payment form making example

-
Image
  Let's put these ideas into practice and build a slightly more involved form — a payment form. This form will contain a number of control types that you may not yet understand. Don't worry about this for now; you'll find out how they work in the next article ( Basic native form controls ). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why. To start with, make a local copy of our  blank template file  and the  CSS for our payment form  in a new directory on your computer. Apply the CSS to the HTML by adding the following line inside the HTML  <head> : < link href = " payment-form.css " rel = " stylesheet " > Next, create your form by adding the outer  <form>  element: < form > </ form > Inside the  <form>  tags, add a heading and paragraph to inform users how required...
Post a Comment
Read more

common html structure for a form

-
  example1: < form > < fieldset > < legend > Fruit juice size </ legend > < p > < input type = " radio " name = " size " id = " size_1 " value = " small " > < label for = " size_1 " > Small </ label > </ p > < p > < input type = " radio " name = " size " id = " size_2 " value = " medium " > < label for = " size_2 " > Medium </ label > </ p > < p > < input type = " radio " name = " size " id = " size_3 " value = " large " > < label for = " size_3 " > Large </ label > </ p > </ fieldset > </ form > example2: < form > < p > < input type = " checkbox " id = " taste_1 " name = ...
Post a Comment
Read more