HTML表单

表单基础结构

-表单介绍

 主要用来收集用户信息，与服务器交互

语法：<form>表单元素<form>

Form标签中，一下标签实现表单元素添加

标签	描述
<select>	菜单和列表标签
<option>	菜单和列表项目标签
<textarea>	文本域标签
<input>	表单输入标签
<optgroup>	菜单和列表项目分组标签

 

<input>标签：

语法:<input type ="类型属性" name="名称"..../>比如：单选框，复选框，按钮，输入文本。。。等等。单标记

<input标签>

Type属性值	描述
text	文字域
password	密码域
checkbox	复选域
radio	单选域
Button	按钮
Submit	提交按钮
Reset	重置按钮
Hidden	隐藏域
image	图像域
file	文件域

例子： 

<form>
姓名：<input type="text" name="username" placeholder="请输入姓名" />
密码：<input type="password" name="password" placeholder="请输入密码" />
<input type="Submit" name="Submit" />
</form>

 

 -搭建表单页面结构

 单行文本域：

 

 单行文本域(text)

属性	描述
Name	文本域的名称
Maxlength	指用户输入的最大字符长度
Size	指定文本框的宽度，以字符个数为单位；文本框的缺省宽度是20个字符
value	指定文本框的默认值
placeholder	指定用户填写输入字段的提示

 

 文件域：file

<input type="file" name="file">

单选框:

checked:选择状态，nam值一样才是单选

男<input type="radio" name="sex" value="man" checked="on">
女<input type="radio" name="sex" value="woman">

 复选框：

name一样的属于一组

读书<input type="checkbox" name="dx1" value="1">
绘画<input type="checkbox" name="dx1" value="2">
篮球<input type="checkbox" name="dx1" value="3">
唱歌<input type="checkbox" name="dx1" value="4">

 按钮：

<input type="button" name="button" value="来点我"/>
<input type="submit" name="sub" value="submit"/>//提交
<input type="reset" name="reset" value="reset"/>//重置

 

图像域：

<input type="image" name="img" src="kfzx_tx@2x.png">

隐藏域

<input type="hidden" name="h1" value="12">

 

-下拉菜单和列表标签

语法：

 <select>

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

<option value>选项</option>

</select>

<select>标签属性

属性	描述
name	设置下拉菜单和列表的名称
multiple	设置可选择多个选项
size	设置列表中可见选项的数目

 

<option> 标签属性

属性	描述
selected	设置选项初始选中状态
value	定义送往服务器的选项值

 

分组下拉菜单和列表：

语法：

<select>
<optgroup label="组1">
<option value="">选项</option>
<option value="">选项</option>
<option value="">选项</option>
</optgroup>
<optgroup label="组2">
<option value="">选项</option>
<option value="">选项</option>
<option value="">选项</option>
</optgroup>
<optgroup label="组3">
<option value="">选项</option>
<option value="">选项</option>
<option value="">选项</option>
</optgroup>

</select>

例子：

<select size="3" multiple="2" name="city">
<optgroup label="贵州">
<option value="gy">贵阳</option>
<option value="lps" selected>六盘水</option>
<option value="as">安顺</option>
</optgroup>
<optgroup label="北京">
<option value="d">东</option>
<option value="x">西</option>
<option value="n">南</option>
</optgroup>
<optgroup label="云南">
<option value="dl">大理</option>
<option value="lj" selected>丽江</option>
<option value="w">我</option>
</optgroup>

</select>

 

多行文本域：

语法：<textarea name="" rows="" cols=""> 内容。。。</textarea>

<textarea>多行文本域

属性	描述
name	设置文本区的名称
placeholder	设置描述文本域预期值的简短提示
rows	设置文本区的可见行数
cols	设置文本区内的可见宽度

例子：

<textarea name="jj" rows="5" cols="30" placeholder="请输入简介" ></textarea>

 

表单属性：

语法:

<form action="" method="" name="" ...>

表单元素

</form>

<form action="action.php" method="post" name="" target="_blank" enctype="text/plain">

表单元素

</form>

<form>标签

属性	值	描述
action	URL	提交表单时向何处发送表单数据
method	get,post	设置表单以何种方式发送到指定页面
name	form_name	表单的名称
target	_bank,_self,_parent,_tiop	在何处打开action URL
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	在发送表单数据之前如何对其进行编码