HTML表单学习笔记

HTML表单学习笔记

作用:HTML 表单用于搜集不同类型的用户输入。

使用标签:<form></form>

表单的属性
(1)action

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常,表单会被提交到 web 服务器上的网页。如果省略 action 属性,则 action 会被设置为当前页面。

在上面的例子中,指定了某个服务器脚本来处理被提交表单

<form action="action_page.php"></form>
(2)method

method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)

PS:http方法是客户端向服务器发送意图的方法?

<form action="action_page.php" method="GET">

GET:GET方法用来请求URL指定的资源。GET最适合少量数据的提交。浏览器会设定容量限制。使用 GET 时,表单数据在页面地址栏中是可见的:

action_page.php?firstname=Mickey&lastname=Mouse

POST:POST方法用来传输实体的主体。

表单包含元素标签:

1.<input>元素
(1)文本输入

注释:表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

<form>
First name:<br/>
<input type="text" name="firstname" value="firstname">
<!---name属性这个不好解释可以通过form的属性method的效果来理解(method是设置表单提交所用的http方法),value属性的值是文本框中的默认显示值 --->
<form>

http方法即告知服务器关于客户端的意图的方法##### (2)单选和多选
单选

<form>
The animals:<br/>
<input type="radio" name="animals" value="cat">Cat<br/>
<input type="radio" name="animals" value="lion">Lion<br/>
</form>

多选

<form>
The animals:<br/>
<input type="checkbox" name="animals" value="cat">Cat<br/>
<input type="checkbox" name="animals" value="lion">Lion<br/>
</form>
(3)提交按钮

定义用于向表单处理程序(form-handler)提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定

<form>
<input type="submit" value="提交">
<!--- value的属性值是提交按钮的文本显示--->
</form>
(4)组合表单数据并定义标题

组合表单数据标签:<fieldset></fieldset>

(网页表现效果是加了个边框)
定义组合表单数据标题标签:<legend></legend>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="action_page.php" method="POST">
<fieldset>
<legend>World</legend>
<br/>First Name:<br/>
<input type="text"  name="firstname" value="firstname"><br/>
Last Name:<br/>
<input type="text"  name="lastname" value="lastname"><br/><br/>
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>

在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值