HTML Form Sample

By Xah Lee. Date: . Last updated: .

Web Scripting Overview

  1. Browser Window Object, DOM
  2. Intro to Event-Based Programing
  3. JavaScript Load Order

DOM How-To

  1. Basic DOM Methods
  2. Get Element by ID, Tag, Name, Class, CSS
  3. Change CSS
  4. Change Node Content
  5. Create/Insert Node
  6. Remove Node
  7. Get Attribute Value
  8. Set Attribute Value
  9. Remove Attribute
  10. List/Add/Remove Class Attribute
  11. Add/Remove Event Handler
  12. Navigate DOM Tree
  13. Node Type, Name, Value

HTML Input

  1. Button
  2. Text Field
  3. Password Field
  4. Textarea
  5. Email 📧
  6. Number Field
  7. Radio Button 🔘
  8. Checkbox 🗹
  9. Popup Menu
  10. Slider 🎚
  11. Color Picker 🌈

Web Scripting Examples

  1. Disable Right Click
  2. document.write
  3. Image Rollover
  4. Pop-up New Window
  5. Digital Clock
  6. Stopwatch
  7. Fade a Element
  8. How to Create Tooltip
  9. Falling Snow Effect
  10. Box Following Scroll

Web Scripting Misc

  1. Web Cookies
  2. Web Storage
  3. DOM: Open URL window.open
  4. Encode URL, Escape String
  5. Browser Info, Navigator Object
  6. Get URL (window.location)
  7. Find Window Width
  8. Find Element Width
  9. WebSocket
  10. Value of “this” in Event Handler
  11. Event Delegation
  12. Get Current Script Tag
  13. insertAfter Element
  14. Randomize List
  15. create Document Fragment
  16. innerHTML, nodeValue, textContent, innerText?
  17. What is Live Object
  18. NodeList vs HTMLCollection
  19. Whitespace Nodes

jQuery

  1. jQuery Basics
  2. jQuery() vs querySelectorAll()
  3. Write JQuery Plugin

node.js


Form Tag, Talking to Server

Note: the form tag is old technology, used around 1998 to 2000s, for sending input data to the server in a method called CGI script. Here's description of how it works.

Today, you use JavaScript to capture data and use JavaScript to talk to server. [see DOM Scripting Tutorial]

A form is done by the form tag. Like this:

<form action="http://example.com/cgi-bin/myProcessFormScript" method="post" enctype="application/x-www-form-urlencoded">
<!-- input tags here -->
</form>

Between the opening/closing tag, should be GUI element tags such as {input, textarea, select, …}. These tags draws GUI elements such as {menu, radio button, button, text field, …}.

When user click on the submit button, the data is sent back to the script action="http://example.com/cgi-bin/myProcessFormScript" on server.

When a form is submitted, a list of name/value pairs is generated as input to the script.

The value may be a number, a string, or a list if the GUI element is a multiple-result one such as check boxes and multi-selection menu.

The following are GUI elements you can use. Each one has a “name” and “value” attributes. The value of “name” attribute is the name of variable sent to your CGI script, and the value of “value” attribute is a string displayed in browser as the default value/choice.

see also HTTP Protocol Tutorial

Uploading a file

Send this file:

HTML code:

<!-- The data encoding type, enctype, MUST be specified as below -->
<form enctype="multipart/form-data" action="xyz.php" method="POST">
<div>
  <!-- MAX_FILE_SIZE must precede the file input field -->
    <input type="hidden" name="MAX_FILE_SIZE" value="30000">
    <!-- Name of input element determines name in $_FILES array -->
    Send this file: <input name="userfile" type="file">
    <input type="submit" value="Send File">
</div>
</form>
Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. CSS
  3. JavaScript
  4. JS Obj Ref
  5. DOM
  6. SVG
  7. Blog