HTML&javaSkcript&CSS&jQuery&ajax（六）

一、HTML表单

1、<input type="text">定义文本输入的单上输入字段，<form> First name:<br>   <input type="text" name="firstname">  <br>  Last name: <br><input type="text" name="lastname"></form>

2、单选按钮输入   <input type="radio">   eg、 <form>  <input type="radio" name="sex" value="male" checked>Male<br>

<input type="radio" name="sex" value="female"> Female

3、提交按钮，<input type="submit">    表单处理程序在action属性中指定。eg、<form action ="action_page.php">

first name:<br>   <input type="text" name="firstname" value="Mouse"><br>

Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Mouse"></form>

4、Method 属性规定提交表单的时候使用的HTTP 方法（get或者post）

<form action="action_page.php method="GET">     <form action="action_page.php method="POST">

如果要正确的提交每个字段必须设置一个name属性， <fieldset></fieldset>组合表单数据

5、下拉列表<select>元素标签   eg、  <select name="cars">

<option value="volvo">Volvo</option>   <option value="saab">Saab</option>   <option value="fait">Fait</option>  <option value="auid"> Auid</option>

</select>

添加预定义选项    <option value="failt" selected>Failt</option>

6、 textarea 元素定义多行输入字段（文本域）   <textarea name="message" rows="10" cols="30">    The cat was playing in the garden.</textarea>

7、<button>元素标签，点击的按钮<button type="button" onclick="alert("Hello world")>Click here</button>

8、Html5 <datalist>元素标签，<input>元素list 属性必须引用<datalist>元素的ID属性

<form action="action_page.php"><input list="browsers"><datalist id="browsers">

<option value="Firefox“>   <option value="Chrome">   <option value="Opera">

</datalist> </form>

9、 输入类型password   <input type="password"> 定义密码字段

<form > User name:<br><input type="test" name="username"><br>

User password :<br>   <input type="password" name=" psw"></form>

10、表单处理 <submit>标签   <form action="action_page.php">         <input type="submit" value="Submit"></form>

单选按钮    <input type="checkbox" name="vehicle" value="Bike">Ihave a bike<br>  <input type="checkbox" name="vehicle" value="Car">I have a car</form>

11、输入类型 number  <input type=":number">能过对数字进行限制

<form>  Quantity(between 1 and 5):   <input type="nmber"  name="quantity" min="1"   max="5"></form>

限制输入 <form >   Quantity:   <input type="number" name="potions" min="0"  max="100" step="10" value=”30‘’></form>

输入日期类型  Date  <input   type="date" >

<form> Birthday:    <input  type="date" name="bday"></form>

12、Value属性规定初始值      eg、  <form action="" > First name:<br>   <input type="text" name=firstname" value=John"><br>

readonly  属性规定输入字段的我只读输入，不能修改eg、   <input  type="text"   name="firstname"   value="John"  readonly>

13、disabled 属性 规定输入西段是禁用的  eg、<input type="text" name="firstname" value="John": disabled>   也就是说 这个John提交不了

size 规定输入字段的尺寸，<input type="text:"  nbame="firstname"  value="John" size="30">

maxlength 规定输入字段的最大长度，   <input type="text”   name="firstname" maxlength="10">

14、 autocomplete属性规定表单输入字段是否应该自动完成， 可以把表单的autocomplete 设置成on   或者off

<form action="action_page.php"  autocompete="on">  Firstname:<input type="text"  name="fname"><br>

E-mail: <input type="email" name="email"   autocompete="off"><br><input type="submit”></form>