5 表单标签

5 表单标签

表单主要是用来收集客户端提供的相关信息,提供了用户数据录入的方式,有多选、单选、单行文本、下拉列表等输入框,便于网站管理员收集用户的数据,是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.

表单被form标签包含,内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后,就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分:

  • 表单标签,包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。
  • 表单域,包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。
  • 表单按钮,包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。

form标签属性:

属性描述
action访问服务器地址服务器端表单处理程序的URL地址
methodpost、get[默认值]表单数据的提交方法
target参考超链接的target属性表单数据提交时URL的打开方式
enctypeapplication/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送]表单提交数据时的编码方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<h3>注册用户</h3>
<form action="http://127.0.0.1:8888" method="post" enctype="application/x-www-form-urlencoded">
    <!--    用户名-->
    <p>
        <label for="user">姓名: </label>
        <input id="user" type="text" name="user" placeholder="用户名">
    </p>
    <!--    密码-->
    <p>密码:<input id="pwd" name="pwd" type="password"></p>
    <!--    复选框-->
    <p>爱好:
        篮球<input name="hobby" type="checkbox" value="basketball">
        足球<input name="hobby" type="checkbox" value="football">
        乒乓球<input name="hobby" type="checkbox" checked="checked" value="pingpang">
    </p>
    <!--单选框-->
    <p>性别:
        男<input name="gender" type="radio" value="man">
        女<input name="gender" type="radio" value="woman">
    </p>
    <!--    日期日历-->
    <p>生日: <input name="birthday" type="date"></p>
    <!--    下拉框-->
    <p>籍贯:
        <select name="province" multiple="multiple" size="3">
            <option value="hebei" selected="selected">河北省</option>
            <option value="shanxi">山西省</option>
            <option value="beijing">北京市</option>
            <option value="qinghai">青海省</option>
        </select>
    </p>
    <!--    提交-->
    <p>
        <input type="button" value="按钮">
        <input type="reset" value="reset">
        <input type="submit">
<!--        <button>提交数据</button>-->
    </p>
</form>
</body>
</html>

代码效果图如下:

image

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生而自由爱而无畏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值