A form designed in accordance with the wcag guidelines

Form is an indispensable part of a Web page. How can we make forms more friendly? This is a form designed in accordance with the wcag guiding principles and has been made in many places.

Fieldset label

The fieldset tag will form a box outside the form elements such as text and input. The legend element is used as the title.

Label Label

Label is used for form elements (input, textarea or select). It is used for passing values to corresponding form elements.

Tabindex

It is used for input, textarea... to give it a number. You can easily enter the input box by using the tab on the keyboard (tabulation key.

Background and Foreground

Background: # fffff, foreground: #333333, color difference: 612> 500, Brightness Difference: 204> 125, meeting requirements.

Code :

<Form action = "index.html"> <fieldset> <legend> contact form </legend> <div> <label for = "name"> Name: </label> <input name = "name" type = "text" id = "name" value = "enter your name here *" maxlength = "30" tabindex = "1" /> </div> <label for = "email"> E-mail: </label> <input name = "email" type = "text" id = "email" value = "Enter your e-mail here *" maxlength = "35" tabindex =" 2 "/> </div> <label for =" title "> title: </label> <input name = "title" type = "text" id = "title" value = "Enter title here *" maxlength = "30" tabindex = "3 "/> </div> <label for = "introduce"> comments: </label> <textarea name = "introduce" Cols = "50" rows = "8" id = "introduce" tabindex = "4"> enter comments here * </textarea> </div> </fieldset> <Div class = "center"> <input name = "cmdok" type = "Submit" class = "button" value = "send" tabindex = "5"/> <input name = "cmdreset" type = "reset" class = "button" value = "reset" tabindex = "6"/> </div> </ form>

demo address