Working with Forms - HTML5 Foundations - page 109

Submit Buttons
The submit type can be used to define a submit button for your form. The text for the button should be set in the
value attribute.
Here is an example of a submit button.
<input type=”submit” value=”Send”>
You can also create Submit buttons using the <button> element that you learn about later in this chapter.
Hidden Fields
There may be times that you want to send data up to the server but hide that data from your users. The hidden type
is designed to enable you to do this.
When using the hidden type, you should specify a name for your <input> element and set the value of the
value attribute to the data that you want to send with the form.
Here is an example of a hidden < input> element that sends a user ID to the server.
<input type=”hidden” name=”id” value=”123”>
You've covered a lot in this section so far. For a quick recap, check out Nick Pettit's video about inputs on Treehouse:
http://teamtreehouse.com/library/websites/html/forms/inputs .
Adding a Message Box with the <textarea> Element
In addition to the fields that you have already added to your form, it would be nice to have a text box where users
can leave comments about their bookings. Input elements are great, but they are not very user friendly when it comes
to inputting large amounts of text, especially if that text needs to span multiple lines. Instead, you can add the
<textarea> element to your form for text-heavy input fields.
The <textarea> element shares many of the same attributes as the <input> element, such as autofocus ,
name , and placeholder ; however, it also has the attributes cols and rows . The cols attribute can be used to
specify how many characters should fit on a single line in the text area, and the rows attribute specifies how many
rows should be visible to the user. Using these two attributes, you can theoretically set the height and width of the
<textarea> (although you may want to do this using CSS instead).
Here is an example of a <textarea> element that uses the cols and rows attributes to specify its size.
<textarea name=”message” cols=”50” rows=”10” ></textarea>
Notice how the <textarea> element has an end tag. Unlike the <input> element, <text
area> is not a void element. Any text content that you place between the start and end tags will be displayed in the
text area.