on air

Learn How To Use HTML Form Tags.

back home » webtutorials » HTML » Learn How To Use HTML Form Tags.


Scenario.

In this example, you'll learn the basics of creating an HTML Form.

HTML Form is used to transfer user data through an intelligent server technology like PHP to the receiver.

Hope your cerebrum catches up with this easily. Let's Go!

Basic HTML Form Tags.

The basic HTML form tags specify the form table that will contain the form Input and so on for users.

A form table contain input elements. Most usually like, text fields, password fields, checkboxes, radio-buttons, submit buttons, select menus, textarea, etc .

<form action="mailto:E-mail-Address | processor.php | 
CGI-Program"
method="post | get" enctype="text/plain">
<!--Form Content -->
</form>
  • The action Attribute sets the action that will be executed when sending the data. Either per E-mail, PHP processing file, or a CGI program.
  • The method Attribute sets the method of sending the data either per post [Secured] or per get. [unsecured]
  • The enctype attribute defines the format in which the data will be encoded before transferring.

Form Input.

The input element specifies the form input fields within the form element. Every input defines a single field line at a time.

See illustration below

<input type="text" name="Name" size="?" 
maxlenght="?" value="Text" readonly="readonly" />
  • The text defines a line input field for users to enter text into.
  • The name attribute specifies a name for the form. This sets a reference to the form for the benefit of attaching a script. However, using the ID attribute in XHTML has a highly recommendation.

  • The size attribute defines the width of an input field. This determines the number of characters that should appear in that field.
  • The maxlength attribute defines the maximum length of characters allowed in an input field.
  • The value will display a predefined text in the input box.
  • The readonly allows the input line box readable only.

Password Field.

The password Field is used to create a password input field.

<input type="password" name="Name" size="?" 
maxlenght="?" value="password" />

The value "password" is used to define a password field. The characters in this field are masked, and will appear either in asterisks or bullets form.

Form Textarea.

The textarea element specifies a multiple text area for the form input field.

The input field can contain an unlimited number of characters. The text within renders in a fixed-width with a default font type.

<textarea name="Name" rows="?" cols="?"
wrap="[ physical | virtual ]"readonly="readonly" />Text
</texarea>
  • The textarea tag defines a multiple text input field.
  • The rows attribute determines the number of rows for the textarea.
  • The cols attribute determines the number of visible figures in a cell.
  • The wrap="physical" will add all the line breaks in the field also per E-mail if send. However, the wrap="virtual" will not.
  • The readonly allows the input field only readable.

Drop Down List.

The drop-down list allows users open up a list of options, and when selected. The selected item will display in the input field ready for execution.

<select name="Name" size="?" multiple>
<option value="Value" selected>List.1</option>
<option value="Value">List.2</option>
<option value="Value">List.3</option>
</selected>
  • The attribute size defines the number of list that will be visible.
  • The Attribute Multiple allows user to select multiple list at a time.
  • The list items are placed between the <select>...</select> tags.
  • The <option> tags reside inside the <select> element and contain the available options in the list.
  • The selected defines the list item that will be selected as default.

Checkbox.

The checkbox allows users select single or multiple options of a limited number of choices at a time.

<input type="checkbox" name="Name" value="Value" 
checked />
<input type="checkbox" name="Name" value="Value" />
  • The Attribute "value" determines the field's value when data are being sent.
  • The Attribute checked defines the default item that will have to stay checked.
  • The names of multiple elements that belongs to checkboxes residing in the same form should read equal.

Radiobox.

The radio button allows users select a single option of a limited number of choices at a time.

<input type="radio" name="Name" value="Value" 
checked />
<input type="radio" name="Name" value="Value" />
  • The Attribute "value" determines the field's value when data are being sent.
  • The Attribute checked defines the default item that will have to stay checked.
  • The names of multiple elements belonging to radio buttons residing in the same form should read equal.

Hidden Filed.

The "hidden" defines an invisible field which stores the default value. This will hide the content of "value" from users.

<input type="hidden" name="Name" value="Value" />
  • The hidden makes the text field invisible. However, it will deliver its value, sending the form data.
  • The Attribute value determines the value of the field at the delivery point.

Submit / Reset Button.

The submit / reset buttons are used to execute their respective tasks. Explained below.

<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
  • The submit defines a button for sending form data to a server. Users will have to fill in the form input field first, and hit the submit button to send form data.
  • The reset defines a button, when used deletes every information a user will type into the form field. Furthermore, this will reset the form back to its default stage.

Image Button.

The image button defines an image as a hyperlink in replace of a text or a default hyperlink.

<input type="image" name="Name" src="URL" />
  • The image defines a graphic button as a hyperlink for sending the data.
  • The URLs defines the path of the graphic that will be used as a button.

<src="/images/graphic.jpg">

Image formats supported by all major browsers are:
[ .jpg | .jpeg | .gif | .bmp | .png ]

Create E-Mail Hyperlink Manually In HTML

Create Email Server Locally | tinkernut.com

Coming across a local email server creation tutorial from Tinkernut.com on youtube and found it useful, I felt a must to introduce it to my users. If you find it great please creadit 'em.

Creating E-mail Sever Video Tutorial

Clicks4UrMind

Man will give you worldly powers, and make you feel on top of all, note this is temporally and could be redrawn at anytime sending you back to the ground floor of life. However, the Lord Almighty, the one and the only rightful ruler of the Universe, blesses everlastingly.

Brain

Knowledge is Power, but Power is not Knowledge. Wisdom is the truthful Power that identifies the Knowledge within the man. And only, I repeat 3x. Only the almighty God has the power to bless the man with his Wisdom forever.

To achieve the Lord's blessings, cease not praying daily, asking for his Wisdom, and you'll be blessed abundantly...

Advertise your business here

Advertising your business means a lot to us. For less than 20€, you can place your business ad here and start receiving traffic.

Place your ad here

SPYERA PHONE

Spyera Phone

Spyera Phone version is software that you install on a smart phone to monitor everything happening on the phone. After installation, SPYERA secretly records events (sms, call history, phone book, location, emails, What's App messages, IM, Facebook Chat, Skype, See photos taken and many more...) that happen on the phone and delivers these information to a web account, where you can view these reports 24/7 from any Internet enabled computer or mobile phone. SPYERA also allows you to listen to the surroundings of the target mobile , listen to the phone conversation and to know the location of the device.

 

Please, Kindly Donate What You Can, Enabling Us Pay Hosting And Domain Costing, And Do More.

Please Donate