专栏首页老雷PHP全栈开发html教程之form表单元素

html教程之form表单元素

老雷html教程之form表单元素

1.form 表单

<form action="post.php" method="post" target="_self" autocomplete="off" enctype="multipart/form-data" >

</form>

属性列表

action 规定当提交表单时向何处发送表单数据

method 数据请求方式 get post

enctype 规定在发送表单数据之前如何对其进行编码

application/x-www-form-urlencoded 默认

multipart/form-data 表单含文件上传时必须使用 file

target 打开方式 _blank,_self

autocomplete 规定是否启用表单的自动完成功能。

on 开启

off 关闭

2. fieldset 将表单内的相关元素分组

legend fieldset 元素定义标题

3. label 标签为 input 元素定义标注

4. input 标签用于搜集用户信息

<input name="title" type="text" value="这是input标签" placeholder="默认内容提示" checked readonly disabled />

name 名称

type

text 单行文本框

hidden 隐藏

password 密码类型

radio 单选框

checkbox 复选框

file 文件上传

value 值

placeholder 规定帮助用户填写输入字段的提示

readonly 只读

disabled 禁用

checked 选中,针对radio checkbox

5. textarea 多行文本框

<textarea name="content" placeholder="默认内容提示" readonly disabled>内容在标签里面哦</textarea>

属性列表

name 名称

placeholder 规定帮助用户填写输入字段的提示

readonly 只读

disabled 禁用

rows 规定文本区内的可见行数

6. select 菜单列表

<select size="1" multiple name="select">

<option selected value="0">选项二</option>

<optgroup label="Swedish Cars">

<option value ="volvo">Volvo</option>

</optgroup>

</select>

select属性列表:

name 下拉列表的名称

disabled 禁用该下拉列表。

multiple 规定可选择多个选项

size 属性规定下拉列表中可见选项的数目

option 具体选项

属性列表

disabled 禁用

selected 选中状态

value 值

optgroup 选项组

label 选项组规定描述

disabled 禁用

7.button 按钮

属性列表

name 名称

value 值

type 按钮类型

button 按钮

reset 重设按钮

submit 提交按钮

disabled 禁用

本文分享自微信公众号 - 老雷PHP全栈开发(L362606856),作者:雷日锦

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 老雷PHP全栈开发教程之必备插件axios

    本节课程我们主要学习axios的使用,axios主要的功能就是实现ajax功能,他是一个简单的ajax库。

    老雷PHP全栈开发
  • css教程之文本字体

    <integer>:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

    老雷PHP全栈开发
  • vi编辑器

    vim是linux上使用最多的编辑器,熟悉这个编辑器的使用,可以大大提高我们的工作效率。

    老雷PHP全栈开发
  • 写给小白的android基础面试笔试题(二)

    答:这道题呢不管是在笔试中也好面试中也好,会被经常拿来问,因为这里面涉及到的知识点甚多,这里你就要回答什么是Handler机制,有何作用,然后面试官肯定还会问,...

    用户2802329
  • springboot集成thymeleaf中爬过的坑

    使用springboot 搭建了框架,然后再加入thymeleaf ,经过测试后发现thymeleaf 完全无效,

    traffic
  • 小白必看:神经网络入门指南

    你是否想知道大家都在谈论的神经网络到底是什么,但你又不敢去问?哈哈,别再害怕了!读了这篇文章,你将能够走进任何一个会议,用你新获得的流行词在午餐桌上大放异彩!

    AI研习社
  • 目标检测算法之YOLOv2损失函数详解

    前面的YOLOv2推文详细讲解了YOLOv2的算法原理,但官方论文没有像YOLOv1那样提供YOLOv2的损失函数,难怪Ng说YOLO是目标检测中最难懂的算法。...

    BBuf
  • 专栏 | 目标检测算法之YOLOv2损失函数详解

    前面的YOLOv2推文详细讲解了YOLOv2的算法原理,但官方论文没有像YOLOv1那样提供YOLOv2的损失函数,难怪Ng说YOLO是目标检测中最难懂的算法。...

    AI研习社
  • 吴恩达-神经网络和深度学习(第一周深度学习概论)

    双愚
  • 陈天奇团队新研究:自动优化深度学习工作负载

    新智元

扫码关注云+社区

领取腾讯云代金券