HTML and CSS Reference
In-Depth Information
<br /><br />
<input type="submit" value="Submit" />
<% } %>
As shown in Listing 5-4, the
<form>
tag is rendered using the
BeginForm()
method. The three
parameters of the
BeginForm()
method represent the action method name, the controller name, and the
form method, respectively. The
Label
and
TextBox
HTML helpers render a
<label>
and an
<input>
tag,
respectively. The view's resulting markup closely matches Listing 5-3.
HTML5 Controls
An HTML5 form consists of a combination of text and controls. The text part of an HTML5 form usually
consists of field labels, section headings, and explanatory text about the form. The HTML5 markup
provides a plethora of controls. These controls can be broadly classified in the following categories:
• Data-input controls in which you type string data. Controls such as text boxes and
<textarea>
fall in this category.
• Option-selection controls that allow you to pick one or more options from a set of
options. Controls such as check boxes, radio buttons, and drop-down lists belong to
this category.
• Range-selector controls that let you pick a value between minimum and maximum
values.
• Date- and time-picker controls that let you choose a date or a part of it (week, day,
month, and so on).
• Color-picker control that allows you to pick color values.
• Button controls that render as Submit, Reset, Image, or push buttons.
• Miscellaneous controls that don't it in any other category mentioned here.
HTML 4.01 provides many of the controls belonging to these categories. Most of the controls listed
here are displayed using an
<input>
element. The
type
attribute of the
<input>
element is responsible for
rendering a required type of control.
HTML5 adds many new input types; you learn about them in the following sections. Table 5-1 lists the
available input types in HTML5 for your quick reference. Some controls that aren't
<input>
types but are
used commonly in HTML forms are also listed.
Table 5-1.
HTML5
<input>
Types
New to
HTML5?
Input Type / HTML Tag
Control Rendered
Additional Notes
text
,
password
,
<textarea>
No
The
<input>
element with
type
equal to
text
renders a single-line text box,
whereas
<textarea>
renders a multiline
text box.
Text box, password-
entry field, free-form
text area
checkbox
,
radio
No
Check box, radio
button
More than one check box can be
selected at a time, whereas only one
radio button from a given group can be
selected. You create a radio-button
group by setting the
name
attribute to a
common value.
