关于HTML中form表单的使用总结

      在学习Java EE的过程中会涉及到一些html的知识,在这里呢Peter xiao结合网上的相关资源,对于html中的form表单做了一些总结(主要是老师上课时提到了这一部分,就顺便了解了一波~)

1. form表单简介

        在html中,表单是经常用到的,用来与用户交互并提交数据。在 Web 网页中,表单用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能,例如,用户进行注册和登录页面就是用表单实现的。

2. 标签的语法格式

<form action="提交地址" method="提交方式">表单内容</form>

其中,表单的内容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等标签

3. 表单元素

        一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。其中表单标签是指<form>标签本身,它是一个包含表单元素的区域,使用<form></form>定义;表单域是<form>标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,对应用户不同的数据;而表单按钮用来提交<form>表单中的所有信息到服务器。

4. <form>标签属性

accept服务器接收到的文件的类型
accept-charset服务器可处理的表单数据字符集
action当提交表单时向何处发送表单数据
autocomplete是否启用表单的自动完成功能,值可以是:on、off,html5新增
enctype在向服务器发送表单数据之前如何对其进行编码,method="post"时可以使用,值可以是:multipart/form-data、text/plain等
method用于发送表单数据的HTTP方法,值可以是:get、post
name规定表单的名称,在xhtml中也废弃,使用id来代替
novalidate提交表单时不进行验证,值为:novalidate,html5新增
target在何处打开action属性中的地址,值可以是:_blank、_self、_parent、_top

5. 运行示例

1)带有两个输入字段和一个提交按钮的 HTML 表单:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>运行示例1</title> 
</head>
<body>

<form action="demo-form.php">
名: <input type="text" name="FirstName" value="aaa"><br>
姓: <input type="text" name="LastName" value="bbb"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

运行结果

 2)带有复选框的表单

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>运行示例2</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

运行结果

 

 

对于form表单暂时就总结这么多,随着学习的深入,在之后也会对该部分知识进行更为全面的总结。 

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值