Mon, 2016-02-22 11:49
suppose i have the following form to design:
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.
Mon, 2016-02-22 17:49
#1
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