Java Reference
In-Depth Information
<button type="submit">Submit</button>
</form>
<script src="js/scripts.js"></script>
</body>
</html>
We'll start with a basic form that's fairly similar to our previous search example, containing
a text input field and button to submit the form.
Note: HTML5 Attributes
The
input
element includes some of the new attributes introduced in
HTML5.
The
autofocus
attribute give focus to this element when a page loads. It
is the equivalent to putting the following line of JavaScript in scripts.js:
forms.hero.name.focus();
The
placeholder
attribute will insert the value provided in the input
field until the user enters some text. This can be useful to place hints about
how to fill in the form.
The
maxlength
attribute will limit the number of characters that can be
entered in the field to the value given (in this case 32).
There are many new attributes that can be employed to make forms more
user-friendly. A good roundup of all the new form elements can be
in this
We'll also need a css folder containing a file called styles.css that contains the following
code (it makes the form look a bit neater by displaying some of the controls as block ele-
ments):
styles.css
label.break, button{
display: block;
}
