The HTML Tags

It all starts with HTML. The ASP.NET MVC template gives developers control again of HTML markup (contrasted with web server controls). We assume that most readers will have a basic understanding of HTML. However, we cover a few core concepts here should you need a brush-up or are new to web development and need to understand how to use HTML to build views as discussed later in this chapter.

The HTML controls start with the ubiquitous <input> tag. This tag is used to define text boxes, buttons, check boxes, radio buttons, and more. The following shows an example of the <input> tag and a few key attributes.

Click here to view code image

<input type="text" name="Notes" maxlength="250" value="Some notes ..." />

Notice that the <input> tag uses the name property to name the element. This allows you to refer to the tag using jQuery selectors. It also helps ASP.NET MVC map the form element back to the object when working on the server. The tag also sets the initial value attribute. The key attribute, however, is type. The type here is set to text. Therefore, this will render as a text box for user input. You use <input> and type to define many different HTML form controls. The following lists the most common type attribute definitions:

button—Used to create a button object. A button, by default, does not submit the form. Instead, use it to call some JavaScript or something similar. Use the Submit type to create a button that posts the form back to the controller.

checkbox—Used to create a check box for the user to click. Use the checked attribute to indicate whether the check box should be checked or not upon display.

file—Used to create a file upload input element. Allows a user to select a file and have it uploaded to the server.

hidden—Used to create a hidden form field. You might do so if you do not want user input but do want the form field passed as part of the form submit.

password—Used to create a text box for entering passwords. (Text is blanked out with bullets.)

radio—Used to provide users with a selection of choices as radio buttons. A user is expected to select only one. You name each of these input items the same but set the values differently.

reset—Used to create a button for resetting a form on the client. This erases any user input and sets things back to default values.

submit—Used to define a button that will submit the form back to the server when it’s pressed.

image—Used to create a Submit button whose visual is an image.

text—Used to create a single-line text box for user entry.

HTML 5 defines many, newer input types. However, most of these newer types are not supported in earlier browsers. This includes types like URL, DateTime, Search, Email, Color, and many more. If you are targeting browsers that support these types, you can use them. Otherwise, you will have to provide an alternative. As you will see shortly, the HTML helpers can help handle this decision on your behalf.

Outside of the <input> tag, there are many other markup elements you are likely going to encounter when creating views and user input forms. The following provides a high-level overview of some of these additional tags:

<div>—Used to group other markup into sections within your page. In general, everything goes within one <div> tag or another. You can also nest <div> tags within each other. CSS often uses <divs> to apply styles to various sections of your page.

<table>—Used to create a table of columns and rows within your HTML page. You use the <thead> tag to define a table head (top row); the <th> tag to define columns within your table head. You use <tr> to indicate a table row; <td> is used to indicate table data for the given column in the row.

<a>—Called an anchor tag, <a> is used to define a hyperlink from one page to another. You can also use an anchor tag and some JavaScript to submit a form (like a button might).

<select> / <option>—Used to create a drop-down list of options for the user. You use the <option> tag within <select> to present each option.

<textarea>—Used to create a larger text entry form field. You use the attributes rows and cols to indicate how big the text area should be (rows = height based on rows text; cols = width based on width of characters).

<label>—Used for defining a label for a form element. The <label> tag does not render any differently than just text in HTML, by default. However, using a <label> can make styling easier and gives you something to leverage should you need to reference the <label> in JavaScript.

<fieldset>, <legend>—Used to group related HTML elements (typically form input fields). The <legend> tag provides a name for the grouping. Both fields are useful for styling a section with CSS.

The last HTML tag we want to discuss in this overview is the <form> element. You nest your user input elements inside a <form> tag. The <form> tag is used to define how your input elements should be sent to the server (HTTP GET or POST) and where they are to be sent. The following shows an example of a <form> element.

Click here to view code image

<form id="form-create" action="create" method="post">

Notice that you use the action attribute to indicate what should receive the action of the form. This is typically something in your site (such as a page or a controller method). You use the method attribute to indicate how that data is to be sent to your site—in this case as a POST. There are many other options when working with a form, such as processing JavaScript and submitting as JSON (as you will see in Chapter 19).

Now that you have a basic refresher on working with HTML, let’s take a look at how the ASP.NET Razor syntax and the related HTML helper classes make creating and working with HTML views even easier.