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="no" />
<span> no </span>
<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>
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>
No comments:
Post a Comment