body内常用标签－－form表单

HTML表单－－form元素

详情请点击

元素定义了HTML表单

1.form标签的属性

1.action
作用：制定向何处发送表单数据
取值：1.绝对URL  2.相对URL（建议采用）

2.method
作用：定义表单提交数据的方式
取值：get：默认值，明文提交，提交数据直接显示在url地址中，安全性低
post：提交的数据在请求数据中，安全性相对较高。提交的数据没有大小限制
3.enctype（待补充）

2.form便签内表单控件

1.input

作用：接受用户输入或搜集用户信息
属性：
1。type属性指定控件类型：

text 输入时显示明文
<form action="www.baidu.com">
    <p>
        name:
        <input type="text">
    </p>
    <p>
        password:
        <input type="text">
    </p>
</form>

password输入时不现实明文
<form action="www.baidu.com">
    <p>
        name:
        <input type="password">
    </p>
    <p>
        password:
        <input type="password">
    </p>
</form>

2.radio单选框

单选框，默认情况下单选框不会排斥
注意：
1，要想完成单选，多个input框的name属性值必须相同
2，要想设定单选框的默认值，必须给input边距添加checked属性：checked＝‘checked’

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="none" checked="checked">保密

3.checkbox复选框

 <input type="checkbox" name="hobbies" value="bas">篮球
 <input type="checkbox" name="hobbies"value="football">足球
<input type="checkbox" name="hobbies" value="voball" checked="checked">排球
<input type="checkbox" name="bobbies" value="footbath" checked="checked">足浴
 

4.file上传文件－－待补充

5.普通按钮button:需要绑定onclick事件才能使用

<input type="button" value="我是按钮" onclick="alert(123)">
<input type="image" src="html.html" onclick="alert(123)">
        

6.提交按钮submit：可以自动提交
<input type="submit" value="提交">

7.重置按钮reset：把表单中填好的数据清除
<input type="reset" value="我是重置按钮">

2.name指定提交数据的key
3.value指定提交数据的value，可设置输入框的默认值
<input type="text" name="user" value="egon">

4.placeholder提示用户应该输入什么样的数据
<input type="text" name="user" placeholder="请输入用户名">

5.disabled禁用该控件，不会提交任何关于该控件的数据

6.lable
作用：关联文本和表单元素，实现点击文本时，如同点击表单元素一样
属性：for属性的值等于被关联的表单元素的ID值

<input type="radio" name="gender" value="male" id="gender1">
<label for="gender1">男</label>
<input type="radio" name="gender" value="female" id="gender2">
<label for="gender2">女</label>

textarea---待补充
select
作用：下拉列表
属性：name属性指定提交给后台数据的key
size取值大于1，则为滚动列表，否则就是下拉列表
mutiple设置多选
optgoup：lable属性设置提示信息
option：value属性指定值提交给后台数据的value

 <p>籍贯</p>
<select name="addr" size="2">
    <option value="生长">生长</option>
    <option value="beijing">beijing</option>
    <option value="shnaghai">shanghai</option>
    <option value="guanzhou">guangzhou</option>
</select>
<p>一线工作城市</p>
<select name="city" size="5" multiple="multiple" style="display: inline-block;width:100px" >
<optgroup label="一线城市">
    <option value="生长">生长</option>
    <option value="beijing">beijing</option>
    <option value="shnaghai">shanghai</option>
    <option value="guanzhou">guangzhou</option>
</optgroup>
 <optgroup label="二线城市">
    <option value="生长">生长</option>
    <option value="beijing">beijing</option>
    <option value="shnaghai">shanghai</option>
    <option value="guanzhou">guangzhou</option>
</optgroup>
</select>