HTML:from表单的属性和常用组合标签

表单的介绍

表单是在页面中可以让用户填写信息,用来收集用户信息,上传服务器,达到与用户交互的行为。

在一个页面可以出现多个form表单,但不允许在一个form表单里面出现另一个form表单

在哪里用的到表单

在网页中常用到表单的地方有登录,注册,用户信息收集,验证码等

表单的组成

表单由表单标签 ,表单域,表单按钮组成

表单标签:from

表单域:from表单中用来收集用户信息的

表单按钮:用来提交<form>表单中的所有信息到服务器

表单标签

from表单,表单标签由from表单定义,只有用from标签包裹的内容才会被提交到服务器

from表单的属性

from标签有以下属性:

action:用来设置目标服务器的URL地址

method:控制form表单的提交方式,该属性可以省略,若省略,默认的提交方式是get

target:指定服务器返回结果显示的目标窗口或目标帧

title:当鼠标在表单上的任意位置停留时,显示的文本

enctype:指定浏览器使用哪种编码方法将表单数据传送给www服务器

name:设置表单的名字

<from
name =""
method = ""
action = ""
target = ""
title = ""
enctype = ""
></from>

表单域

每一项用来收集用户信息的输入框或选项,常用的表单域 有 输入框,复选框,单选框,文字域,下拉列表等

input

input标签是表单中最常用的标签之一,通过改变它的type属性来完成不同的需求

type属性

type属性值内容
<input type = "text"/>文本模式,默认20个字符
<input type = "password"/>密码模式,输入的内容将会被字符掩饰
<input type = "submit"/>提交按钮,把表单的内容上传到服务器 
<input type = "button"/>普通按钮用来触发 JS函数,不具有提交功能
<input type = "file"/>上传文件按钮,
<input type = "radio"/>单选按钮
<input type = "checkbox"/>多选按钮
<input type = "hidden"/>隐藏输入框
<input type = "image"/>提交按钮,图片模式
<input type = "reset"/>重置按钮
<input type = "email"/>Email模式,限制用户只能 输入 Email类型
<input type = "url"/>url模式,限制用户只能 输入url类型
<input type = "date"/>日期模式,限制用户只能 输入 日期类型
<input type = "time"/>时间模式,限制用户只能 输入 时间类型
<input type = "month"/>月模式,限制用户只能 输入 月类型
<input type = "week"/>周模式,限制用户只能 输入 周类型
<input type = "number"/>数字模式,限制用户只能 输入 数字类型
<input type = "tel"/>手机号码
<input type = "search"/>搜索框
<input type = "color"/>生成一个颜色选项表

 

 

 

 

name属性 

用来定义定义控件名称

<input name = "给标签设置的名字"/>

value属性

 设置定义控件初始值

<input value = "控件初始值"/>

checked属性

设置控件初始状态是否被选中,一定要相同的name属性达到单选的效果

<input  name = "xxx" checked/>
文件上传

使用file类型的input时要注意以下几点

1.form表单的method属性值要为post

1.form要加enctype="multipart/form-data"属性,这个属性说明了我们的文件以二进制方式传输文件,因为我们计算机本身最底层都是以二进制来显示、传输。

默认地,表单数据会编码为 "application/x-www-form-urlencoded",不能用于文件上传

 <form action="" method="post" enctype="multipart/form-data">

       <input type="file" name="file1"/>
</from>
图片按钮

name:定义控件名称

src:指定图像地址

<input type="image" src="图片路径"/>

文字域

textarea用来创建一个可以输入多行文本的文本框,有cols属性和 rows属性,设置文本框的行数和列数,以字符为单位。

<textarea name="" id="" cols="30" rows="10"></textarea>

下拉菜单

select用于创建下拉列表或可以多选的列表框,<option></option>用来设置列表中的项目

select属性:                                   

name:此列表框的名字                             

multiple:设置是否可多选,该属性不需要赋值,如果加入该属性,在进行多项选择时,需要按住Ctrl键选择。                        

size :规定下拉列表中可见选项的数目(显示几行) 

disabled:规定禁用该下拉列表

option属性:

selected :用来指定默认的选项

value: 用来给<option>指定的那一个选项赋值,这个值是要传送到服务器上的,服务器正是通过调用<select>区域的名字的value 属性来获得该区域选中的数据项的

<select name="" id="">

       <optgroup label="山西">

       <option value="1">太原</option>

       <option value="2">晋中</option>

       <option value="3">晋城</option>

       </optgroup>

       <optgroup label="河北省">

              <option value="4">石家庄</option>

              <option value="5">保定</option>

              <option value="6">沧州</option>

       </optgroup>

</select>

label标签

label是input的描述,它本身不会有特殊效果,但它和其它input标签使用可以提升用户的使用体验,用户不用非得点击到按钮,而是点击文字即可选中,如“记住密码”。该标签有如下属性:

    1、for:指定快捷键将作用于的表单字段元素,设置值必须与某个表单字段元素的id值相吻合。

    2、accesskey:指定作用于for属性所对应的表单字段元素的快捷键,如果要使用这个快捷键,必须同时按下Alt键和这个快捷键。

<label>标签一般和radio、checkbox类型一起使用。

<fieldset>元素集

fieldset 元素可将表单内的相关元素分组,通常和legend标签一起用,legend标签定义了fieldset的提示信息,fieldset是块级元素

<fieldset>

                   <legend>健康信息</legend>

 身高:<input type="text" />

 体重:<input type="text" />

</fieldset>

表单按钮

<button>触发form表单提交按钮</button>
 <input type="submit"> 触发form表单提交按钮
<input type="button"> 并不会触发form表单提交

发送数据的要求

如果想要被提交到服务器,必须满足以下两个条件,缺一不可:

1. 标签必须具有name属性值,没有name属性值的标签就无法组装键值对,它的值不会被提交。
2. 必须是input、select、textarea标签,其他标签的数据不会提交到服务器。

触发表单的方法

1. 点击了表单中的提交按钮(数据会刷新)
2. 用Ajax进行提交(异步提交,局部刷新)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值