HTML标记之Form表单

简介: 一、表单的作用   从访问的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息,然后单击某个按钮提交这些信息。是客户端与服务器端的交流途径。 二、说明   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>

相关文章
|
11月前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
10月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
10月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
11月前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
10月前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
11月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性2
`novalidate` 是 HTML `&lt;form&gt;` 元素的布尔属性,用于禁用浏览器的默认表单验证功能。当此属性存在时,浏览器不会检查表单字段是否符合预设的验证规则,允许开发者通过 JavaScript 等手段自定义验证逻辑。
|
10月前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `&lt;input&gt;` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;`可使输入值以3为单位递增或递减。
|
Web App开发 移动开发 JavaScript
HTML 5中的标记方法
内容类型 (ContentType) 首先, HTML 5的文件扩展符与内容类型保持不变。也就是说,扩展符仍然为" .html" 或 ".htm" ,内容类型 (ContentType)仍然为 "text刷html" DOCTYPE声明 DOCTYPE声明是HTML文件中必不可少的,它位于文件第一行。
3118 0
|
Web App开发 移动开发 JavaScript
|
Web App开发 移动开发 JavaScript
《HTML 5+CSS 3入门经典》——1.3 HTML 5的语法变化和标记方法
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第1章,第1.3节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1238 0

热门文章

最新文章