1 reply [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

suppose i have the following form to design:

LINK

Now i have the following HTML:

<form class="input-container online-booking-form">
 
    <h5>Heading here</h5>
 
    <div class="input-inline">
        <input type="text" placeholder="Enter Your Name">
        <input type="text" placeholder="Enter Your Telephone">
    </div>
 
    <input type="text" placeholder="Enter Your Email Address">
    <input type="text" placeholder="Enter Your Subject">
 
    <div class="input">
        <textarea type="text" placeholder="Enter your message"></textarea>
    </div>
 
    <button type="submit" class="btn-submit">Submit</button>
 
</form>   

Is it fine for the heading to be insdie the form or should it be outside the form ?

I have had situation's recently when i need headings to be used inside the form element , is that very wrong to do ? Is it fine to use headings inside form elements ?

Thank you.

Gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 59 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

You can use heading elements, but ...

I think that structurally it should be used to introduce the form, e.g.

<h3>Book online</h3>
 
<form action=""
      method=""
      id="booking-form">
  ...
</form>

There are fieldset elements and legend elements for grouping and captioning related form controls. Further, every form control, other than <input type="submit"> should have a label. The specs specifically state that placeholder is not to be used instead of LABEL.

    <h2>Heading here</h2>
    <!-- Seriously?  You're nested five deep?
    I wouldn't think lower than h3, more likely h2 -->
 
    <form id="booking-form"
	    action=""
	    method="">
      <!--Forms are input containers by definition
      How many booking forms do you have on a page?-->
 
      <fieldset>
	<legend>Contact info</legend>
 
        <label>Name <input type="text"></label>
 
        <label>Telephone <input type="text"
	    			 placeholder="xxx-xxx-xxxx"></label>
	<!-- This is a more proper use of the placeholder attribute,
	to show the preferred formatting -->
 
	<label>Email <input type="text"></label>
      </fieldset>
 
      <fieldset>
	<legend>Message</legend>
 
	<label>Subject <input type="text"></label><br>
 
        <textarea rows="10"
		cols="60"></textarea>
      </fieldset>
 
      <button type="submit">Submit</button>
    </form>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.