Please note that this page requires JavaScript for it to function.

Try it out! Type the field names out first (One field per line!), e.g.: First name Surname Town State/Region

  

Markup syntax

XHTML HTML

Form method

post get

Create name/ids based on label text (e.g. "Middle Name(s)" becomes "MiddleNames")

Prefix field ids with,'txt', 'sel' etc (e.g. "Middle Name(s)" becomes "txtMiddleNames")

Create ARIA labelledby attributes (what's aria-labelledby?)

Form action:

Form name/id:

Help text to display for required fields: (will appear in title attribute of form control)

Submit button value:

Here is your completed form markup. You can even add some CSS to knock it into shape, if you'd like a helping hand.

div.row {background:#ffc;border:2px solid #ffc;margin:0 0 5px 0;float:left;width:100%;padding:6px 0;} div.row {background:#ffc; margin:0 0 5px 0;float:left;width:100%;padding:6px 0;} body{font-family: Geneva, Arial, Helvetica, sans-serif; margin:0; padding:0;} div.row {background:#EEE;margin:0 0 5px 0;float:left;width:100%;padding:6px 0;} div.row label {float:left;display:block;width:15em;font-weight:bold;padding:0 6px;} div.row label:hover {background:#0066FF;cursor:pointer;} div.row fieldset {border:1px solid gray;margin:0 6px;} div.row fieldset span {display:block;} div.row fieldset span label {float:none;display:inline;} div.row fieldset legend {font-weight:bold;} div.requiredRow {border:2px solid #049;} .submit { -moz-box-shadow:inset 0px 0px 0px 0px #97c4fe; -webkit-box-shadow:inset 0px 0px 0px 0px #97c4fe; box-shadow:inset 0px 0px 0px 0px #97c4fe; background-color:#3d94f6; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #337fed; display:inline-block; color:#ffffff; font-family:arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:0px 0px 0px #1570cd; }.submit { background-color:#1e62d0; }.submit { position:relative; top:1px; } .textbox{font-size:16px;padding:6px;background:#F3F3F3;border:1px solid #CCC;-webkit-border-radius:9px;-moz-border-radius:9px;border-radius:9px} .textbox,select{width:300px;margin-right:9px} .textbox:focus,select:focus{background:#FFF;outline:#FF0 solid 1px;-webkit-border-radius:0}