HTML标记之Form表单

一、表单的作用

从访问的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息,然后单击某个按钮提交这些信息。是客户端与服务器端的交流途径。

二、说明

  Form标记用于创建一个表单,定义一个表单的开始与结束,他是一个容器,用于包含其他元素,例如文本框、单选框等。表单元素必须在form标记内才有作用。

  语法:

<form action=url(传送目标,处理表单信息的服务器端应用程序)  method=处理表单的方式(post/get)默认为get, name=”表单名”>

表单元素

    </form>

  注意:post方法可以传递大量信息,get将值附加到请求的url中,适合少量的信息。

三、表单元素标记

  ①.单行文本

    <input name=”文本框名称” type=”text” value=”初始值” size=“显示字符数” maxlength=“最多容纳字符数”readonly=”readonly”(设置为只读) disable=”disable”(设置为不可操作)  ></input>  

  ②.密码框 

    <input name=”文本框名称” type=”password” value=”初始值” size=“显示字符数”></input>

③.单选框 

    <input name=”文本框名” type=”radio” value=” 提交值” checked=”checked”(是否被选中) ></input>,

  ④.复选框

    <input name=”文本框名” type=”checkbox” value=”提交值” checked=“checked”></input>

  ⑤.下拉框

    单选下拉框:

    <select name=”下拉框名”>

      <option selected=”selected” (那个是初始选择就添加) value=”提交值”>列表1</option>

      <option>列表2</option>

</select>

    (<optgrounp label=”分组名称”><option></option></optgrounp>用来做有子项的下拉框)

    多选下拉框:

     <select name="下拉框名字" size="显示的行数" multiple="multiple"> //multiple:表示允许多选

        <option value="提交值">显示值</option>

          。。。。

      </select>

四、表单元素标签分类

  1.<label >标注内容</label>标签:为input元素定义标注(标记),<label>标签的for属性应当与相关元素id相同

  如:<input type=”redio” name=”sex” id=”man”><label for=”man”>男</label>就把input标签和label标签关联在一起。

  2.按钮

    语法:<input type="按钮类型:reset[重置表单]、submit[提交表单]、button[普通按钮]、" name="按钮名称" value="按钮显示文本"> 

  3.图片按钮

    语法:<input type="image" name="按钮名称" src="图片路径" />

  4.隐藏域:

    语法:<input type="hidden" value="隐藏域的值" />

  5.多行文本

    语法:<textarea name="多行文本框名称" cols="每行中的字符数" rows="显示的行数"></textarea>

  6.文件框

    语法:<input type="file" name="文件框名称" size="显示长度"/>

  7.表单外框

    语法:<fieldset></fieldset>定义围绕表单中元素的边框

       <legend></legend>为fieldset元素定义标题

   8.动画插入

    语法:<embed src="动画地址" width="宽度" height="高度" wmode="transparent:使flash背景部分透明"></embed>

   9.滚动字幕

    语法:<marqueen 
        direction="滚动方向:left[左]、right[右]、up[上]、down[下]" 
        behavior="滚动方式:scroll[一圈一圈绕着走]、slide[只走一次]、alternate[来回]"
        loop="滚动的循环次数,若未指定则循环不止(loop="infinite")"

        bgcolor="背景颜色"
        onMouseOver="this.stop(),鼠标进入暂停"
        onMouseOut="this.start(),鼠标离开继续"
        scorllamount="滚动速度,值越大,速度越快"
        scrolldelay="延时,走一走,停一停"
      ></marqueen>

    10.内嵌框架元素

      语法:<frameset rows="行高及行数" cols="列数及列宽" framespacing="框架间距"             frameborder="框架边框设置:yes/no,1/0" border="边框宽度" bordercolor="边框颜色">             <frame src="被包含的文件路径及名称" name="框架名称" noresize="是否允许改变框架大小,true/false" scroll="滚动条显示控制,yes/no/auto">          </frameset>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

bootstrap源码分析之tab(选项卡)

实现tab选项卡的应用,此插件相对比较简单 源码文件: tab.js 实现原理 1、单击一个元素时,首先将原来高亮的元素取消 2、然后给被单击元素进行高亮 3...

25580
来自专栏禅林阆苑

前端拾零01—checkbox&radio&select总结 【原创】

前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

12330
来自专栏微信小程序开发

小程序中图片高度等比缩放

前言:小程序中的image组件,有默认的宽度(320px)和高度(240px),如果想让图片按比例显示,那就需要自己设置宽度 & 高度。今天来说一下图片等比缩...

602100
来自专栏韦弦的偶尔分享

微信小程序button组件样式

需要使用微信小程序button组件的open-type来实现授权之类的操作时,发现样式并不是自己想要的,然后改起来也并不是很方便,下面让我们一起看一下:

4.2K40
来自专栏编程微刊

clientX和clientY 事件属性的使用

做项目中遇到一个这样的需求,点击属性菜单节点,出现显示框,显示框的位置随着鼠标点击的位置距离而改变。

24410
来自专栏Youngxj

CSS3随机背景图片切换特效

85160
来自专栏天天

微信小程序 自定义组件样式

组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:

70420
来自专栏高爽的专栏

HTML锚点

        以前只是知道有锚点这么个东西,一直没有用到,昨天做毕设用到了锚点,现在总结一下控制锚点的几种情况:         1. 在同一页面中 <a n...

51400
来自专栏python3

tkinter -- Canvas(3)

scale 缩放 item,计算公式:(coords - offset)*scale + offset

9120
来自专栏marsggbo

li浮动时ul高度为0,解决ul自适应高度的几种方法

内容提要:   li浮动时ul高度为0,解决ul自适应高度的几种方法 在网页设计中,常常需要对li标签做浮动效果,但是在不同浏览器中会遇到兼容性问题,比如IE中...

24670

扫码关注云+社区

领取腾讯云代金券