HTML Basics (forms and inputs, frames)

---restore content starts---

HTML forms and inputs

• HTML layout
• HTML Framework

HTML forms are used to collect different types of user input.

Example

Text field

This example shows how to create a text field in an HTML page. The user can write text in the text field.

Password field

This example shows how to create an HTML password field.

(You can find more instances at the bottom of this page.) ）

form

A form is a region that contains form elements.

Form elements are elements that allow users to enter information in a table consignments (such as a text field, drop-down list, radio box, check box, and so on).

The form is defined using the form label (<form>).

<form>,  ..... INPUT element ...</form>

input

In most cases, the form label used is the input label (<input>). The input type is defined by the type attribute. Most of the input types that are often used are as follows:

text fields

A text field is used when a user wants to type something like letters, numbers, and so on in a form.

<input type="text" name="firstname" /><input type="text" name="lastname" /></form>

The browser appears as follows:

Notice that the form itself is not visible. Also, in most browsers, the default width of a text field is 20 characters.

radio button (Radio Buttons)

A radio box is used when a user chooses one of several given choices.

<form> <input type="radio" name="sex" value="male" /> male<br/> <input type="radio" name="sex" value="female" /> female</form>

The browser appears as follows:

Note that you can only select one of these.

check box (checkboxes)

The check box is used when the user needs to select one or several options from several given selections.

<form> <input type="checkbox" name="bike" /> i has a bike<br/> <input type="checkbox" name="car" /> I have a car</form>

The browser appears as follows:

Action Property (action) and confirmation button for the form

When the user clicks the Confirm button, the contents of the form are transferred to another file. The action properties of the form define the file name of the destination file. This file, which is defined by the action attribute, is usually processed in connection with the input data received.

action="html_form_action.asp" method="get">Username: <input type= "text" name= "user"/> <input type="submit" value="Submit" /> </form>

The browser appears as follows:

If you type a few letters in the text box above and click the Confirm button, the input data will be transferred to the "html_form_action.asp" page. The page will display the results of the input.

more examples

check box

This example shows how to create a check box in an HTML page. The user can select or deselect the check box.

radio button

This example shows how to create a radio button in HTML.

Simple drop-down list

This example shows how to create a simple drop-down list box in an HTML page. The drop-down list box is an optional list.

Another drop-down list

This example shows how to create a simple drop-down list with preselected values. (Editor's note: Preselected values refer to pre-specified preferences.) ）

Text field (Textarea)

This example shows how to create a text field (multi-line text input control). The user can write text in the text field. The number of characters that can be written is not restricted.

Create button

This example shows how to create a button. You can customize the text on the button.

FieldSet around data

This example shows how to draw a box with a caption around the data.

Form Instances

form with input box and confirmation button

This example shows how to add a form to a page. This form consists of two input boxes and a confirmation button.

A form with a check box

This form contains three check boxes and a confirmation button.

Form with radio button

This form consists of two radio boxes and a confirmation button.

Send e-mail from forms

This example shows how to send an e-mail message from a form.

HTML Framework

By using the framework, you can display more than one page in the same browser window.

Instance

Vertical frame

This example shows how to create a vertical frame using three different documents.

Horizontal frame

This example shows how to create a horizontal frame using three different documents.

(You can find more at the bottom of this page

Multiple instances. ）

Framework

By using the framework, you can display more than one page in the same browser window. Each HTML document is called a frame, and each frame is independent of the other.

Disadvantages of using frames:

• Developers must track more HTML documents at the same time
• It's hard to print the entire page

Frame structure label (<frameset>)

• Frame structure label (<frameset>) defines how to split a window into a frame
• Each frameset defines a series of rows or columns
• The Rows/columns value specifies the area of the screen that each row or column occupies.

Editor's note: Frameset tags are also translated into frameset by certain articles and books.

Frame labels (frame)

The frame tag defines the HTML document that is placed in each frame.

In the following example, we set up a two-column frameset. The first column is set to occupy 25% of the browser window. The second column is set to occupy 75% of the browser window. The HTML document "Frame_a.htm" is placed in the first column, and the HTML document "Frame_b.htm" is placed in the second column:

<frameset cols= "25%,75%" > <frame src= "frame_a.htm" > <frame src= "frame_b.htm" ></frameset>

Basic considerations-Helpful tips:

If a frame has a visible border, the user can drag the border to change its size. To prevent this from happening, you can add: noresize= "Noresize" to the <frame> tag.

Add <noframes> tags to browsers that do not support frames.

Important: You cannot use the <body></body> tag with the <frameset></frameset> tag simultaneously! However, if you add a <noframes> tag that contains a piece of text, you must nest the text in the <body></body> tag. (in the first instance below, you can see how it is implemented.) ）

More examples

How to use <noframes> tags

This example shows how to use the <noframes> tag.

Hybrid frame Structure

This example shows how to make a frame structure with three documents and mix them in rows and columns. The border can be moved.

Frame structure with noresize= "noresize" attribute

This example demonstrates the Noresize property. In this case, the frame is not resizable. Drag the mouse over the border between frames and you'll notice that the border is not movable.

Navigation frame

This example shows how to make a navigation frame. The navigation frame contains a list of links that target the second frame. The file named "Contents.htm" contains three links.

Inline frame

This example shows how to create an inline frame (a frame in an HTML page).

Jumps to a specified section within the frame

This example shows two frames. One of these frames sets a link to a specified section within another file. The section specified in this "link.htm" file is identified using <a name= "C10" >.

Use frame navigation to jump to a specified section

This example shows two frames. The navigation frame on the left contains a list of links that target the second frame. The second frame shows the document being linked. The navigation frame contains links to the sections specified in the destination file.

HTML Iframe

Syntax for adding an IFRAME

<iframe src= "URL" ></iframe>

The URL points to the location of the quarantined page.

Iframe-Set height and width

The height and Width properties are used to specify the heights and widths of the IFRAME.

The default unit of a property value is pixels, but it can also be set in percentages (such as "80%").

Instance

<iframe src= "demo_iframe.htm" width= "height=" ></iframe>

Try it yourself.

Iframe-Delete Border

The Frameborder property specifies whether the border around the IFrame is displayed.

Setting the property value to "0" allows you to remove the border:

Instance

<iframe src= "demo_iframe.htm" frameborder= "0" ></iframe>

Try it yourself.

Use IFRAME as the target of the link

The IFRAME can be used as the target for the link.

The target property of the link must reference the Name property of the IFRAME:

Instance

name="iframe_a"target= "Iframe_a" >W3School.com.cn</a></p>

HTML 4.01 Quick Reference

• HTML Color Name
• HTML Document Type

HTML Quick reference from W3school. It can be printed for daily use.

HTML Basic Document

Text Elements

<p>this is a paragraph</p><br> (line break) 

Logical Styles

<em>this text is emphasized</em><strong>this text was Strong</strong><code>this is some Computer code</code>

Physical Styles

<b>this text is bold</b><i>this text is italic</i>

Links, anchors, and Image Elements

<a href= "http://www.example.com/" >this is a link</a><a href= "http://www.example.com/" ></a><a href= "Mailto:[email protected]" >send E-mail</a>a named Anchor: <a name= "Tips" >useful tips section</a><a href= "#tips" >jump to the useful tips section</a>

Unordered List

<ul><li>first Item</li><li>next item</li></ul>

Ordered List

<ol><li>first Item</li><li>next item</li></ol>

Definition List

<dl><dt>first Term</dt><dd>definition</dd><dt>next term</dt><dd> Definition</dd></dl>

Tables

<table border= "1" ><tr>  <th>someheader</th>  <th>someheader</th></ tr><tr>  <td>sometext</td>  <td>sometext</td></tr></table>

Frames

<frameset cols= "25%,75%" > <frame src= "page1.htm" > <frame src= "page2.htm" ></frameset>

Forms

<form action= "http://www.example.com/test.asp" method= "Post/get" ><input type= "text" name= "LastName" value= "Nixon" size= "maxlength=" "><input type=" password "><input type=" checkbox "checked=" Checked "> <input type= "Radio" checked= "checked" ><input type= "submit" ><input type= "reset" ><input type= " Hidden "><select><option>apples<option selected>bananas<option>cherries</select ><textarea name= "Comment" rows= "cols=" ></textarea></form>

entities

&lt; Is the same as <&gt; Is the same as >& #169; Is the same as?

Other Elements

<!--This was a comment--><blockquote>text quoted from some source.</blockquote><address> Address 1<br>address 2<br>city<br></address>

HTML Basics (forms and inputs, frames)