设置表单提交方式,form表单是如何提交数据的

首页 > 旅游 > 作者:YD1662024-02-01 08:56:38

列表标签

在HTML中列表分为无序列表有序列表自定义列表(项目列表)。接下来就看看他们有什么不同吧!

作用:如果说table标签是用来显示数据的,那么列表标签就是用来进行html页面布局的。

语法:

<ul> <li></li> </ul>

<ul></ul>标签中只能且必须嵌套<li></li>标签。li标签之间没有先后顺序,是并列存在的。li标签里可以容纳文本、数据、图片、超链接等内容。跟table一样,列表标签也自带样式属性,但为了代码统一,我们还是会使用css来设置。

代码示例:

<h2>无序列表:</h2> <ul> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul>

运行界面:

设置表单提交方式,form表单是如何提交数据的(1)

语法

<ol> <li></li> </ol>

<ol></ol>标签里面只能嵌套<li></li>标签,在这里li标签是有顺序的。

代码示例:

<h2>有序列表:</h2> <ol> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ol>

运行界面:

设置表单提交方式,form表单是如何提交数据的(2)

语法

<dl> <dt></dt> <dd></dd> </dl>

<dl></dl>标签:定义列表

<dt></dt>标签:列表标题

<dd></dd>标签:列表内容

一个dd标签是对dt标签标题的说明。这两个标签中可以包含任何标签。

代码示例:

<h2>自定义列表:</h2> <!-- dl:外层标签 dt:项目标题 dd:项目内容 --> <dl> <dt>水果种类</dt> <dd>苹果</dd> <dd>橘子</dd> <dd>香蕉</dd> </dl>

运行界面:

设置表单提交方式,form表单是如何提交数据的(3)


表单标签

作用:收集用户信息。一般用在注册界面等。

组成:一个完整的表单中包含表单域(整个填写界面所有信息)、表单控件(表单元素)和提示信息(表单控件的提示作用)3个部分。

表单域:是一个包含表单元素的区域。

<form>标签用于定义表单域,实现用户信息的收集和传递。

作用:将其区域范围内的信息收集并传送给服务器。

语法

<form action=”url地址” method=”提交方式” name=”表单域名称”> 各种表单控件 </form>

注:action:url地址,指定接收并处理表单数据的服务器程序的url地址。

method:用于设置表单数据的提交方式。

method=”get”:提交数据时,地址栏可查看到数据。数据量少且安全级别不高时使用。

method=”post”:提交数据时,地址栏数据是加密的。

name:表单域的名称。用于区分同一页面下的不同表单域。

1.Input输入表单元素

语法:<input type=””>,依据type属性值不同区分不同控件。

文本框:<input type=”text”>。单行输入字段,默认宽度20个字符。输入的文字可见。

密码框:<input type=”password”>。输入内容默认不可见。

单选框:<input type=”radio”>,默认情况下选中后无法取消。

注:为实现多选一状态,需要将所有的单选框控件具有同一个name名。

复选框:<input type=”checkbox”>,选中后可以更改可以取消。

提交按钮:<input type=”submit”>,默认按钮中的提示文字是提交,可以通过value值进行更改内容。点击提交按钮后会把表单数据发送到服务器。

重置按钮:<input type=”reset”>,默认按钮中的提示文字是重置,可以通过value值进行更改内容。点击后会清楚表单中的所有数据。

普通按钮:<input type=”button”>

文件域:<input type=”file”>,用来选择文件,一般适用于文件上传。

label标签:标注标签,配合input控件一起使用

作用:绑定表单控件,扩大点击范围。

当点击label标签的内容时,系统会自动选中该表单控件。

代码示例:

<h1>label标签</h1> <form> <label for="text">用户名:</label> <input type="text" name="用户名" id="text"><br> <label for="password">密码:</label> <input type="password" id="password"><br> <label for="男">男</label> <input type="radio" name="sex" id="男"> <label for="女">女</label> <input type="radio" name="sex" id="女"><br> </form>

运行界面:

设置表单提交方式,form表单是如何提交数据的(4)

首页 12下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.