Designing personal form for filling out and print

HTML & CSS
1

unsure how to place form input controls in 3 rows i.e surname, middle name, & lastname.

2

What have you tried so far, do you have any code to show?

3

I’m familiar with contact form but not the one in question. Thus, can only write code for the former. However, if you insist lemme provide the validation code if you can read any meaning from it and assist me accordingly - sir!

4

As we’re not sure what “the former” is, I don’t think there’s much there we can go on. Can you show us that, so we know what you’re referring to?

5 
<script type="text/JavaScript" src="jquery1.js"></script>

<script type="text/JavaScript" src="validate.js"></script>

<script type="text/JavaScript">
   
       $(document). ready(function () {
            $("#personal_form ").validate ( {
                   debug : false,
                    rules : {
                            surname : "required",
                             . //the list goes on
                             .
                   },
                   messages : {
                          surname : "required"
                             .
                             .
},


submit Handler : function (form) {
            $ (' #loading ').CSS ('visibility', 'visible');

            $ (' #button').CSS ('visibility', 'visible');
            $.post ('process1.php', $(" #personal_form").serialize(), function (data) {
                     $ (' #results').HTML (data);
            $ (' #loading').CSS ('visibility', 'hidden');
            }) ;
       }
  }) ;
}) ;
6

I understood your question to be about the structure (html) and the layout (css) of the form, not the validation (js). Where is the code for actually making the form ie the html and css?

4 Likes
7

@webmachine Hush! Well, you’re on point and thus supposing I’ve sth like this:

<form action=''  method="post"  class="contact">
<fieldset>
 <legend>who are you?</legend>
 <div>
  <label for="contactname">Contact Name </label>
  <input type="text" name="contactname" Id="contactname"/>
  </div> 
  <div>
  <label for="telephone">Telephone Number</label>
 <input type="text" name="telephone" Id="telephone "/>
  </div>
  </fieldset>
  </form>

Now if I wanna have 'em in a row, how do I go about it then, seeming that this would place 'em vertically. 10q

8

If you remove the divs around each input they will be inline in a single row. Is that what you want?
Though fro your OP I thought you wanted 3 separate rows, which this should give you.

1 Like
9

Yh wanted 3 rows @SamA74 & which could give me anyway? Do you mean the same tweak?

10

But you only have two inputs. :confused:

11

You have contactname and telephone, but you wanted surname, middlename and lastname. Why don’t you just change the html to match that. Copy and paste one of the labels and inputs so you have three. Then change the wording of the labels and the name attribute of the input.

By the way, isn’t surname the same as lastname?

Also Id is not capitalized. It should be id.

12

Thanks, I just overlooked. Besides the labels don’t sit atop of the input boxes. Why and how? @SamA74

13

These are inline elements by default, you can change that with css.

label, input {
    display: block;
}
14

@SamA74 You’re my favicon 10q a lot! Then I hope CSS would work also for positioning the IMG box for file upload right?

15

<way off topic>

What do your interesting conversational abbreviations stand for?

You’re my favicon 10q a lot!

Yh wanted 3 rows

10q

I’ve sth like this

</wot>

16

Irrelevant to the post though,
Favicon = favorite icon
Yh = yeah
10q = thank you

17

Unambiguous communications with members of your species is irrelevant?

??? Really, what does “sth” stand for?

Ah, the Urban dictionary of exclusive slang to the rescue!

1 Like
18

Haha!

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.