Course weeks and topics | |
---|---|
1. Intro to HTML 5 | 6. Page Layout with CSS |
2. First Web Page | 7. HTML Tables |
3. Developing a Web Site | 8. HTML Forms |
4. Design with CSS | 9. Multimedia |
5. Midterm | 10.Term Project |
HTML Forms, Part 1The BasicsContentsIntroductionPurpose of formsBasic Form ElementsInput elementtype attributename attributevalue attributeplaceholder attributehidden attributeFocusTerminologyTry itFieldset and Legend ElementsLabel ElementText Area Element
Forms allow users to enter data that can be processed by code that either runs in the browser (JavaScript) or that runs on the server (PHP, ASP.NET, Node.js, etc.)
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit" value="Submit">
</form>
The most common use of the input element is to enter text—this is the default use.
Tye type attribute determines what kind of control will be shown in the browser. It has these possible values:
This attribute defines the name of the field. It will be used in the name-value pair that is sent to the server.
xxxxxxxxxx
<input type="text" name="lastname"><br>
Use this to set a default value for an input element.
xxxxxxxxxx
<input type="text" name="lastname" value="Stark"><br>
This attribute puts "watermark" text in an input element.
xxxxxxxxxx
<input type="text" name="firstname" placeholder="First name"><br>
This attribute makes an input element invisible.
xxxxxxxxxx
<input type="text" name="lastname" hidden><br>
When you click on a control, it's outline will become bolder or show in some way that it has been selected. This is called giving it focus. Using the tab key you can move from one control to the next in the form.
Control Element: form elements that the user can interact with, like the <input>
element, are also known as a control elements.
Field: Any control element that lets you enter information (that's all of them except the button) is also known as a field.
Value: The information entered in a field is called the value.
The <fieldset.
element groups a set of controls in a form by putting a box around them.
The <legend>
element inserts a legend (aka title) into the box surrounding the fields.
xxxxxxxxxx
<form>
<fieldset>
<legend>User's Name</legend>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</fieldset>
<input type="submit" value="Submit">
</form>
Labels don't change the appearance of the form, but they:
for
attribute is used (the for value must match the id
of the input element).Note: labels are in-line elements but, you can change them to a block element with the CSS display:block
property.
xxxxxxxxxx
<form>
<label for="first">First name:</label><br>
<input type="text" name="firstname" id="first"><br>
<label for="second">Last name:</label><br>
<input type="text" name="lastname" id="second">
<br><br>
<input type="submit" value="Submit">
</form>
The <textarea>
element allows users to enter multiple lines of text.
The row and cols attributes determine the size.
The wrap attribute determines the type of line warp: hard or soft.
Hard: Carriage-return and line-feed character codes are inserted into the text where it wraps.
%0D
.%0A
.Soft: No character codes are inserted where the text wraps.
xxxxxxxxxx
<label for="review">Describe the trail</label>
<textarea name="review" id="review" rows="3" cols="40" wrap="hard"></textarea>
ASP.NET Core MVC Lecture Notes by Brian Bird is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.