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>