跟随我在oracle学习php(4)

本文深入讲解HTML表单的创建与使用,包括文本框、密码框、按钮等元素的属性及功能,探讨表单的提交方式与数据处理,适用于前端开发者学习。

    制作html表单

客户端(每个用户的计算机)在浏览网页时,都会向服务器(后台)端索要数据,然后将得

到的数据呈现在浏览器当中。除了索要数据之外,有时客户端也希望能够向服务器端发送

一些数据。

这时我们就需要表单,如百度的输入框,注册时的输入框和按钮都是表单。

 表单

<form action=””></form>

 

表单元素(能单独用)

<input type=”text”><br>

<input type=”password”>放到表单里面

<button>提交</button>

通用格式:<input type=”类型” name=”” value=””>

属性: name  value给后台发送的值

 

文本类型 属性:readonly(只读,属性名跟属性值一样的可以不写属性值)maxlength(最大 写入长度值) size(栏位显示宽度)disabled (不可操作的)

Text(普通文本), password(密码框),hidden(隐藏域,页面上看不见,但 会传到后台)

textarea(特殊格式)<textarea name=””id=”” cols=“ ” rows=””></textarea> 将内容提交后台

选择类型 属性:checked(默认选中)如果想设置必须选择某项,加checked和disabled

              Selected (option的默认选中)multiple 将下拉选项全部显示

   Size=“数字”显示多少个选项

Radio(单选)当name值分为一组生效 checkbox(多选)

Select(特殊格式,下拉) <select  name=””id=””> <option value=””>

按钮类型

button(普通按钮)reset(重置按钮)

Submit (提交按钮)=<button></button>(必须在表单内)

按钮图像:<button name=”栏位名称” type=”图象形态”>

         <img src=”URL”>

         </button>

 

图像按钮:<input type="image" src="url" alt="文本">

其他类型

File(文件) date(时间日期) color(颜色)。。。。。。。

表单属性

Action(往哪提交,指到指定文件)

Method(提交方式)默认为get: ***php?text=***&password=***** 不安全

                        Post 不显示,较安全

Enctype multipart/form-data(发送文件)

 

<fieldset>

修饰表单

</fieldset>

<Legend>表单标题,与<form>同级

 

表单的功能结构:

 

主标记结构:<from>…</from>

属性 值 说明

name 字符串 给这个表单起个名字

method get/post 表单的传输方式

action url 传输目标

enctype="multipart/form-data"

 

 文本栏、密码栏、隐藏栏

 

文本栏:<input type=”text” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly=”readonly”>

 

密码栏:<input type=”password” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly=”readonly”>

 

隐藏性栏位:<input type=”hidden” name=”栏位名称” value=”栏位值”>

 

 复选栏、单选栏

 

多重勾选栏位:<input type=”checkbox” name=”栏位名称” value=”内定值” checked=”checked” disabled=”disabled”>

 

单选栏位:<input type=”radio” name=”栏位名称”  value=”内定值”                        checked=”checked” disabled=”disabled”>

 

 窗体栏位、区块栏位

 

窗体选项栏位设置:<select name=”栏位名称” size=”数字” >
                   <option value=”选项值” selected=”selected”>…
                   <option value=”选项值”>…
                  <option value=”选项值”>…
                  </select>

//分组<optgroup label="分组名称"></optgroup>

//多选multiple

 

文字区块的设置:<textarea cols=”设置长度” rows=”设置宽度”>
                   ………
                   </textarea>

 

按钮、图像按钮

 

按钮设置: <input type=”submit” value=”按钮中显示的文字”>
         <input type=”reset” value=”按钮中显示的文字”>

 

按钮图像:<button name=”栏位名称” type=”图象形态”>
         <img src=”URL”>
         </button>

 

图像按钮:<input type="image" src="url" alt="文本">

 

允许上传文件

上传栏位:<input type="file" name="file">

 表单加上外框和标题

 

:<fieldset>...</fieldset>  

标  题:<legend>...</legend>

 

转载于:https://www.cnblogs.com/RighTgraM/p/10475540.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值