html表单填写保存在哪里,网页表单保存在什么位置

4baaa6d80bed31b166ff09822d7ced10.png

表单网页是一个网站和访问者开展互动的窗口,下面是表单网页设计[1]的一些基本知识和表单美化方法。

初识表单

表单可以用来在网页中发送数据,特别是经常被用在联系表单-用户输入信息然后发送到Email 中。表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML,你能够自助地找到一些简单的教程,开发一个服务器端的程序使一个发送到Email的表单工作。

表单元素

实际用在HTML中的标签有form、 input、 textarea、 select和option。表单标签form定义的表单里头,必须有行为属性action,它告诉表单当提交的时候将内容发往何处。

可选的方法属性method告诉表单数据将怎样发送,有get(默认的)和post两个值。常用到的是设置post值,它可以隐藏信息(get的信息会暴露在URL中)。网页教学网

所以一个表单元素看起来是这样子的:

input标签在表单制作中起到的作用很重要。有10种形式,概括如下:

是标准的文本框。它可以有一个值属性value,用来设置文本框里的默认文本。

像文本框一样,但是会以星号代替用户所输入的实际字符。

是复选框,用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked,像这样的格式.

与复选框相似,但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked,使用方法跟复选框一 样。

是展示你电脑上的文件的一个区域,就像你在一个软件中打开或者保存一个文档一 样。

是一个被点击后提交表单的按钮。你可以用值属性value来控制按钮上显示的文本(下面的button和reset类型也可以这样,稍后介绍),如下: .

以图像代替按钮文本,src属性是必须的,像img标签一样。

是一个如果没有其他代码的话什么都不做的按钮。

是一个点击后会重置表单内容的按钮。

不会显示任何东西,它用来传输诸如用户正在用的页面的名字或者Email地址等表单必须传输的东西。

注意输入标签input也是用“/>”自关闭的。

多行文本输入框标签textarea基本上就是一个比较大的文本框。它必须有行属性rows和列属性cols,用法像这样:网页教学网

Webjx.Com welcome

选定标签select与选项标签option一起可以制作一个下拉选框。是这样工作的:

Option 1

Option 2

Option 3

当表单被提交时,被选中选项的值将被发送。网页教学网

与复选框和单选按钮的预选属性checked一样,选项标签option也有一个预选属性selected,它可以用在这样的格式中:

Rodent

上述的标签中在网页中看起来都不错,但是,如果你有一个程序来处理这个表单,这些标签都不起作用。这是因为,表 单字段需要名称。所以所有的字段中都需要增加名称属性name,比如 。 网页教学

一个表单看起来应该像下面这样(注意:这个表单不会工作,除非有一个用来提交数据的“reg.asp”的文件,它位于表单标签form的行为属性action中。)

Name:

Comments:

Your comments

Are you:

Male

Female

An hermaphrodite

Asexual

◆◆

评论读取中....

请登录后再发表评论!

◆◆

修改失败,请稍后尝试

首先,您需要使用jQuery的表单验证插件,例如jQuery Validation。这个插件可以帮助您在提交表单之前验证表单输入。 以下是一些基本步骤: 1. 引入jQuery和jQuery Validation库: ```html <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> ``` 2. 在您的HTML表单上添加验证规则: ```html <form id="myform"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <button type="submit">Submit</button> </form> ``` 在这个例子中,我们使用“required”验证规则来确保用户必须填写名称和电子邮件地址。 3. 使用jQuery Validation插件初始化表单: ```javascript $(document).ready(function() { $("#myform").validate(); }); ``` 4. 在表单提交之前验证表单: ```javascript $(document).ready(function() { $("#myform").validate({ submitHandler: function(form) { // 表单验证通过,执行保存操作 alert("Form saved!"); } }); }); ``` 在这个例子中,我们使用“submitHandler”选项来指定在表单验证通过后执行的函数。您可以在此函数中编写保存表单的代码。 5. 可以使用其他验证选项来自定义您的验证规则,例如最小/最大长度、自定义验证函数等。请参考jQuery Validation文档以获取更多信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值