03HTML表单-课堂作业

HTML表单

语法：

　　　　　　　　　　　　<form>

　　

　　表单元素　　

 　　　　

</form>

 

 

Form标签中,以下标签实现表单元素添加:
标签　　　　　　　　描述

<input>　　　　　　表单输入标签

<select>　　　　　 菜单和列表标签

<option>　　　　    菜单和列表项目标签

<textarea>　　　　文字域标签

<optgroup>　　　  菜单和列表项目分组标签

 

<input>标签
语法:
<input　　type=“类型属性”　　name="名称"　　......./>

Type属性值　　　　描述

text　　　　　　　文字域

password　　　　  密码域

file　　　　　　　 文件域

checkbox　　　　 复选域

radio　　　　　    单选域

Button　　　　　  按钮

Submit 　　　　    提交按钮

Reset　　　　　  重置按钮

Hidden　　　　　　隐藏域

image　　　　　　图像域

 

单行文本域
语法:
< form>

　　<input type="text"　　name="..."...../>  　　　　　　注意：只能输入一行内容。

</form>

属性　　　　　　　　　　描述

Name　　　　　　　　文字域的名称

Maxlength　　　　　　指用户输入的最大字符长度。

Size　　　　　　　　指定文本框的宽度，以字符个数为单位;文本框的缺省宽度是20个字符。

value 　　　　　　　　指定文本框的默认值

placeholder　　　　　　规定用户填写输入字段的提示

 

 

密码框
语法:
<form >

　　<input type=" password“　　name=”....."/>

</form>
注意:密码域也是文本域的形式,输入到文本域的文字....显示。

 

单选框
语法:
< form>

　　<input type= "radio" name= "... ”　　value= ...”checked />

</form>
注意:同一组的name值要相同。

 

复选框
语法:
<form>

　　<input type= "checkbox"　　name=“...”　　value= "...“ 　checked />

</form>

 

 

图像域(图像提交按钮)
语法:
<input type= "image”name="..."src= "imageurl" />

 

下拉菜单和列表标签
语法:
<select>

　　<option　　value = "...“>选项</option>

　　<option 　　value=“....”>选项</option>

</select>

<select>标签属性

属性　　　　　　　　描述

name　　　　　设置下拉菜单和列表的名称

multiple　　　　设置可选择多个选项

size　　　　　　设置列表中可见选项的数目

 

<option>标签属性

属性　　　　　　　　描述

selected　　　　设置选项初始选中状态。

value　　　　　　定义送往服务器的选项值。

 

分组下拉菜单和列表标签
语法:
<select name=“”>

　　<optgroup label= “组1" >

　　<option value = "... “>选项</option>

　　<option value= "... ”> 选项</option>

　　.......

　　</optgroup>

　　<optgroup label= “组2”>

　　<option value =" .... " >选项</option>

　　<option value= "... ”> 选项</option>

　　.......

</optgroup>
......

 

多行文本域<textarea>
语法:

<textarea name=”. .”rows=" .. " cols= " .."...>

　　内容.....
</ textarea >

 

表单工作原理

 

 

<from>标签

语法:
<form action=“”method=“”name =“”...>

　　表单元素
</form>

属性　　　　　　值　　　　　　　　　　　　　　　　描述

action　　　　　URL　　　　　　　　　　　　　　提交表单时向何处发送表单数据

method　　　　get、post　　　　　　　　　　　　设置表单以何种方式发送到指定页面

name　　　　form_ name　　　　　　　　　　　　表单的名称

target　　　　_blank、_ self,_parent, _top　　　　　在何处打开action URL

enctype　　application/x-www form-urlencoded　　　　在发送表单数据之前如何对其进行编码

　　　　　　multipart/form-data     text/plain

 

post和get区别
GET :
使用URL传递参数
对所发送信息的数量也有限制
一般用于信息获取

POST :
表单数据作为HTTP请求体的一-部分
对所发送信息的数量无限制
一般用于修改服务器上的资源