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

Thread: Creating form

  1. #1
    Join Date
    Feb 2017
    Posts
    13

    Creating form

    How do I create this form http://imgur.com/a/x2Tip

    if you can't see the image here is the link http://imgur.com/a/x2Tip

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    21,921
    https://www.w3schools.com/html/html_forms.asp

    <form> tags, <input> tags (type="radio"), <label> tags, etc....
    "Well done....Consciousness to sarcasm in five seconds!" ~ Terry Pratchett, Night Watch

    How to Ask Questions the Smart Way (not affiliated with this site, but well worth reading)

    My Blog
    cwrBlog: simple, no-database PHP blogging framework

  3. #3
    Join Date
    Mar 2012
    Posts
    3,786
    Creating the form is the easy part.The harder part is doing something with the input. That cannot be done in HTML. You generally need to use a server-side language, like PHP, to do the processing and possibly SQL (depending on what you want to do with the info).

  4. #4
    Join Date
    Feb 2017
    Posts
    13
    Quote Originally Posted by NogDog View Post
    https://www.w3schools.com/html/html_forms.asp

    <form> tags, <input> tags (type="radio"), <label> tags, etc....
    I know how to create a radio button form!! The question was probably not very clear. Therefore here is my form what i have done http://js01.comeze.com
    Now you can compare with the image what I have post and you will see what is different. I have find out they are using advance technique of CSS what is called -webkit-inline-box but it doesn't look like the image.

    Sorry for confusing I thought it is HTML but as I have mentioned above I find out it is CSS problem. Unless you know how to do it in HTML

  5. #5
    Join Date
    Jan 2017
    Location
    Madison, Wisconsin state
    Posts
    105
    Hi marcellio,
    Are you referencing the "alignment of the form content" or the "white-bulged border" above and below?
    - Douglas

  6. #6
    Join Date
    Feb 2017
    Posts
    13
    Quote Originally Posted by Douglas_William View Post
    Hi marcellio,
    Are you referencing the "alignment of the form content" or the "white-bulged border" above and below?
    - Douglas
    The alignment of the form. Their radio buttons are align nice in one line which my are little bit of the line.

  7. #7
    Join Date
    Mar 2017
    Posts
    4
    Great article!Thanks for sharing.

  8. #8
    Join Date
    Jan 2017
    Location
    Madison, Wisconsin state
    Posts
    105
    Hi marcellio,
    Did a lil alignment for you in using "Float-Left" Divisions. This locks the overall dimensions to around 751px by 250px which should appear fine in most displays (even mobile - I believe). This is not a responsive design although I have one of those ... I just can't get the formatting to remain using this method of "float-left's" ...it'd probably work using a table format for responsiveness but tables are frowned upon by many elite (that is not to say 'One should not use what is at-hand to get the job done').
    HTML:
    HTML Code:
    <div class="containerbdan">
       <form id="questions01A">
          <div id="oneboxA"><!-- Float-Left Column OneA -->
             <p class="question" for="age">
                How old are you?
                <br>
                <br>
                What is your BMI?
                <br>
                <br>
                Does anybody in your family have diabetes?
                <br>
                <br>
                How would you describe your diet?
             </p>
          </div>
          <div id="oneaboxA"><!-- Float-Left Column Spacer OneA -->
          </div>
          <div id="twoboxA"><!-- Float-Left Column TwoA -->
             <p>
                <label for="teen">1-25</label>
                <input name="age1" value="0" id="teen" checked="checked" type="radio">
                <br>
                <br>
                <label for="lower">0-25</label>
                <input name="bmi1" value="0" id="lower" checked="checked" type="radio">
                <br>
                <br>
                <br>
                <label for="no">No</label>
                <input name="diabet" value="0" id="no" checked="checked" type="radio">
                <br>
                <br>
                <br>
                <label for="lowsugar">Low sugar</label>
                <input name="diet1" value="0" id="lowsugar" checked="checked" type="radio">
             </p>
          </div>
          <div id="twobboxA"><!-- Float-Left Column Spacer TwoA -->
          </div>
          <div id="threeboxA"><!-- Float-Left Column ThreeA -->
             <p>
                <label for="adult">26-40</label>
                <input name="age1" value="5" id="adult" type="radio">
                <br>
                <br>
                <label for="low">26-30</label>
                <input name="bmi1" value="0" id="low" type="radio">
                <br>
                <br>
                <br>
                <label for="grand">Grandparent</label>
                <input name="diabet" value="7" id="grand" type="radio">
                <br>
                <br>
                <br>
                <label for="sugar">Normal sugar</label>
                <input name="diet1" value="0" id="sugar" type="radio">
             </p>
          </div>
          <div id="threecboxA"><!-- Float-Left Column Spacer ThreeA -->
          </div>
          <div id="fourboxA"><!-- Float-Left Column FourA -->
             <p>
                <label for="old">41-60</label>
                <input name="age1" value="8" id="old" type="radio">
                <br>
                <br>
                <label for="medium">31-35</label>
                <input name="bmi1" value="9" id="medium" type="radio">
                <br>
                <br>
                <br>
                <label for="sibling">Sibling</label>
                <input name="diabet" value="15" id="sibling" type="radio">
                <br>
                <br>
                <br>
                <label for="highsugar">Quite high sugar</label>
                <input name="diet1" value="7" id="highsugar" type="radio">
             </p>
          </div>
          <div id="fourdboxA"><!-- Float-Left Column Spacer FourA -->
          </div>
          <div id="fiveboxA"><!-- Float-Left Column FiveA -->
             <p>
                <label for="older">60+</label>
                <input name="age1" value="10" id="older" type="radio">
                <br>
                <br>
                <label for="high">35+</label>
                <input name="bmi1" value="10" id="high" type="radio">
                <br>
                <br>
                <br>
                <label for="parent">Parent</label>
                <input name="diabet" value="15" id="parent" type="radio">
                <br>
                <br>
                <br>
                <label for="highersugar">High sugar</label>
                <input name="diet1" value="10" id="highersugar" type="radio">
             </p>
          </div>
          <p class="ind"><!-- Under-lying "Submit" Button Paragraph -->
             <input name="submit" value="Calculate_01A" id="button01" type="submit">
          </p>
       </form>
     </div>
    And the CSS:
    Code:
    body   {
        background:#fff;
        color:#000;
        overflow:auto;
        font: 100% Tahoma, Arial, "Trebuchet MS", Sans-serif;
        margin:auto 0px;
        width:100%;
        }
    .containerbdan   { 
        margin:0px auto;
        width:92%;
        }
    #oneboxA   {
        color:#000;
        background:#fff;
        float:left;
        width:220px;
        height:auto;
        /* border: 1px solid red; */
        }
    #oneaboxA   {
        color:#000;
        background:#fff;
        float:left;
        width:10px;
        height:65px;
        /* border: 1px solid red; */
        }
    #twoboxA   {
        color:#000;
        background:#fff;
        float:left;
        width:100px;
        height:auto;
        text-align:right;
        /* border: 1px solid red; */
        }
    #twobboxA   {
        color:#000;
        background:#fff;
        float:left;
        width:10px;
        height:65px;
        /* border: 1px solid red; */
        }
    #threeboxA   {
        color:#000;
        background:#fff;
        float:left;
        width:122px;
        height:auto;
        text-align:right;
        /* border: 1px solid red; */
        }
    #threecboxA   {
        color:#000;
        background:#fff;
        float:left;
        width:10px;
        height:65px;
        /* border: 1px solid red; */
        }
    #fourboxA   {
        background:#fff;
        color:#000;
        float:left;
        width:145px;
        height:auto;
        text-align:right;
        /* border: 1px solid red; */
        }
    #fourdboxA   {
        color:#000;
        background:#fff;
        float:left;
        width:10px;
        height:65px;
        /* border: 1px solid red; */
        }
    #fiveboxA   {
        background:#fff;
        color:#000;
        float:left;
        width:104px;
        height:auto;
        text-align:right;
        padding-right:10px;
        /* border: 1px solid red; */
        }
    #questions01A   {
        display: inline-block;
        width:751px;
        height:250px;
        border: 1px solid black;
        }
    .ind   {
        text-indent:50px;
        }
    - Douglas

  9. #9
    Nice information... Thanks for posting the link..

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



Recent Articles