• 表单的基础结构:表单的开始标记<form>和结束标记</from><input>控件和处理表单的方法。【input元素是一个空元素,所以不用结束标记,默认情况下呈现为一个纯文本框】

input控件:

1.文本框:

默认宽度通常为20个字符。处理表单中所有控件,必须为每一个控件定义一个名称(name),在使用name特性时,为了避免单词与单词之间空格导致的问题,将单词短语连接在一起,每个单词的第一个字母大写。name特性名称必须唯一。size:文本框的长度。

密码框:

<form>
~~~~~~:<input   
name=”UserName”><br>
~~~~~:<input 
type=”password”   name=”Password”>
</form>

**搜索框:
**

<form>
<input  type=”search”  name=”Search” 
placeholder=”~~~”  size=”~”>  
</form>

**单行文本框:
**

<form>
~~~~~~:<input><br>
~~~~~:<input>
</form>

**多行文本框:
**

<form>
~~~~~~.<br>
<textarea    name=”~~”  placeholder=”~~~” ></textarea>  
</form>

指定多行文本框的大小,使用cols属性(宽度)和rows特性(高度)。当用户视图输入更多的数据,超过了多行文本框可见文本区域时,多行文本框的滚动条就会出现。设置overflow:scroll可以强制滚动条显示出来。设置overflow:auto可以让浏览器根据输入的文本的数量来决定是否显示滚动条

2. 复选框:

<input type=”checkbox” name=”~~@~” value=”~@~” >~@~<br>
<input  type=”checkbox” name=”~~~” value=”~~”  checked >

3. 单选按钮:

<input  type=”radio”  name=”~~~” 
value=”fax” 
checked>fax<br>

在input标记中添加checked特性,使页面初始化加载时,其对应的一个单选按钮默认处于被选中状态。
如果有多个单选按钮的name值相同,在处理表单时,把这些相同的name特性值的单选按钮视为一个单选按钮,因为控件type特性一致,所以一个单选按钮组中每次只能选中一个按钮。
Radio按钮只要求简单回答Yes或No的问题。

4. 按钮(submit按钮(用于提交表单),reset按钮(用于复位表单),push按钮):

<input  type=”。。。”  value=”。。。”>或者
<button  type=”~~~”>~~~~</button >

5. 下拉菜单:

select元素用于创建选择菜单的基本结构,而option标记则用于创建菜单中的每一个菜单项。将size特性设置为一个大于1的数值,否则加载页面时,仅能看到一个选项。

<form>
~~~~~~:
<select    name=”~~”  size=”3” >     <!--在一个选项菜单中,用户一次就能看到3个选项-->
<option   value=”!!”>!!</option>
<option   value=”@@”>@@</option>
<option   value=”~~”>~~</option>
<option   value=”$$”>$$</option>
<option   value=”%%”>%%</option>
</select>  
</form>

在option标记中,使用value特性,可避免在处理表单时造成混淆。标记中添加selected特性,可在页面加载时将其设置为以经选中的项。在select标记中添加multiple特性可让用户能够一次选择多个选项。optgroup元素用于较长的菜单分为多个子菜单。optgroup元素的label特性用于为子菜单设置一个名称。
eg:

6. 文件选择器:

 <input  type=”file”  name=”~~~”>

7.隐藏控件:


HTML5中新增了很多新的input控件。Type特性为number(数值框),range(滑块),email,url,tel。

 Eg:<input type=”range” min=”1” max=”10” step=”1” value=”5”>

验证表单内容

<input pattern=”[0-9]{16}”  title=”~~~” name=”~~~” value=”~~”  required >

当用户输入错误的数据并试图提交表单时,工具提示才会显示。如果该input控件保持为空,则不会对要求匹配的模式进行检查。为避免用户提交含有空白字段的表单,在相应的input标记中添加required特性。


表单的处理方法

<form action=”~~~~” method=”post”>

//action属性定义了一个接收表单信息的位置,即应将表单信息发送到何处。
method特性用于告诉浏览器如何将数据发送服务器
该特性有两个常见的取值:get和post。  
get方法获取表单提交的数据,并将其附在`URL`之后发送给服务器。
post是在将表单数据附加在服务器端脚本的目标`URL`之后,直接将数据发送到脚本文件。  
enctype是`encoding type`(编码类型)的缩写,当method特性为post时,enctype特性告诉浏览器如何格式化数据
它的默认值是`application/x-www-form-urlencoded。`
posted on 2016-05-13 16:22  钎探穗  阅读(1325)  评论(0编辑  收藏  举报