HTML traditional user input tags introduction

1. User simple line input:

Text input is very common for single-line input, below is a simple input html segment with some attributes

<input type="text" id="username" name="username" a/>

2. Text Area input:

Sometimes you need to input some long text message into the system and a single line is not enough.

Now you may need ‘Text Area Input’:

3. Submit button:

When user finished the inputs, he may want the information to be submitted to the server for data store or verification.

Submit button is another type of input

<input type='submit' value="login" name="loginBut">

Usually it should be working with ‘form’

<form id="loginForm" name="loginForm" method="get" action="new.html">

Method is the http method and action is the target url

new.html?username=myusername&password=mypassword&loginBut=login

4. password

when you want to hide the password to be displayed on the screen, you may want the input type set as ‘passsword’

<input type="password" id="password" name="password" a/>

The user input will not be displayed as plain text.

But the information still shows in address bar when using a get method.

5.  Checkbox

Check box is used for multiple choose option, user can choose more than one options if they like

For example

<input type="checkbox" name="colorselection" id="colorselection"

value="blue" checked /> <span> blue </span>

<input type="checkbox" name="colorselection"

value="red" /> <span> red </span>

<input type="checkbox" name="colorselection"

value="yellow" /> <span> yellow </span>

<input type="checkbox" name="colorselection"

value="green" /> <span> green </span>

6. Radio

compared with checkbox button, users may only allow to choose only one option from the list, then radio or droplist (introduced next section)

<input type="radio" name="rememberme" id="rememberme" value="yes" checked /> <span> yes </span>
<input type="radio" name="rememberme" id="rememberme" value="no" /> 

<span> no </span>

7. DropDownList

last one we want to talk about is the dropdownlist

dropdown list a different from the above user input options using <input> tag, it is using <select> tag

as below:

                
<select name="colorselector" style="width:100%">
   <option id="optionAL" value="AL" selected>Alabama</option>
   <option id="optionAK" value="AK" selected>Alaska</option>
   <option id="optionAZ" value="AZ" selected>Arizona</option>
</select>