form表单总结

form标签

  form标签用于创建form表单，form标签中包括属性有action、method、name，包含的元素有input、select、textarea。

1 表单属性

1.1 action属性

action是用来跳转路径的，是在提交表单时所执行的动作。点击提交按钮后跳转到action所带属性值的地址上。

<form action="表单练习.html" >
        
</form>

路径

路径分为绝对路径和相对路径。绝对路径是指目标文件在硬盘上的真实路径（从盘符开始，找到所需文件路径 路径+文件名）。相对路径是指源文件相对于当前文件位置的路径（在写代码时如果文件在同一目录下可以直接引用文件的名字）。

1.2 method属性

method属性是用来明确表单提交方式的。提交方式有get、post两种。

    <form action="表单练习.html"method="get" >

    </form>

    <form action="表单练习.html"method="post" >

    </form>

post与get相比post更为安全一些。因为使用post时，被提交的数据不会显示在页面地址栏中。（默认值为get)

1.3 name属性

name属性表示表单的名称。表单的正确提交需要每输入一个字段就必须设置一个name属性。

 <form action="表单练习.html" method="post" name="regester"> 
        用户名:<input type="text" name="uesername">
        密码: <input type="password" name="password"> 
        <input type="submit">
 </form>

2 表单元素

2.1 input元素

input元素是最重要的表单元素，是一个单标签。它可以根据type属性的不同而变化。

语法格式：

<input type="元素类型" name="元素名称" value="元素的值">

2.1.1 type输入类型

text	文本框（定义供文本输入的单行输入字段)
password	密码框
radio	单选按钮
checkbox	多选按钮（可以是零个选项）
submit	提交按钮（如果省略value属性按钮则获得默认文本）
reset	复位按钮
button	普通按钮
image	图像按钮（src属性后是图片的绝对路径或相对路径）
file	文本域(上传文件的按钮)
hidden	隐藏域
email	邮箱
color	颜色域
date	日期
time	时间
datetime-local	日期+时间
range	进度条

2.1.2 input的属性

checked	默认选择
readonly	只读 字段只可以读不能修改
disabled	表示禁用 不可以点击
autofocus	默认光标的位置
required	不能为空白提交
height、width	height 和 width 属性规定元素的高度和宽度(仅用于 "image")

2.2 select元素

  select用来显示下拉列表框，通常与option标签连用。selected用来表示默认选项，meltiple属性是以列表形式显示。

<p>
    您的家庭住址是：
    <select name="" id="" >
        <option value="xian" selected>西安</option>
        <option value="chongqing">重庆</option>
        <option value="xinjiang">新疆</option>
        <option value="biejing">北京</option>
        <option value="xian">西安</option>
 </select>
 </p> 
 <p>
    您的收获地址是：
    <select name="" id="" multiple>
        <option value="">请选择你的收获地址</option>
        <option value="yongchuan" >永川</option>
        <option value="jiangbie" selected>江北</option>
        <option value="wanzhou">万州</option>
 </select>    
 </p>

2.3 textarea元素

  textarear元素用来实现文本域（多行输入字段）

<p>
    请留下您的建议或者意见：
<textarea name="" id="" cols="30" rows="10">您的建议或者意见
</textarea>
</p>