第三代半导体 linux grid formvalidator.js vue源码下载 php零基础入门视频 jquery each bootstrap日历插件 grep不是内部命令 matlab网页版 matlab取实部 cad正在执行命令 docker启动命令 python语言入门 python入门例子 简单python脚本实例 javafile java基础教学 学java基础 java代码注释 linuxtail命令 linux目录系统 手机模拟器下载 视频修复工具 unity3d下载 迅雷会员共享账号 pr怎么放大视频画面 0000008e qq流览器下载 图片转pdf软件 js对象转字符串 易语言tv cadworx 三菱plc序列号 layout软件 ps二寸照片制作教程 ps拼图合图教程 免费录屏工具 cdr怎么复制图形 cad合并成块
当前位置: 首页 > 学习教程  > 编程语言

后浪小萌新HTML --- 表单

2020/8/11 20:24:52 文章标签:

一、表单标签:form

是一个容器标签,本身单独用没有意义,一般需要结合表单相关的标签(input、select、textarea)来使用。

它可以对表单标签中所有用户信息收集相关的标签的内容进行整体的重置和提交。

action属性 - 后端数据接口的地址

method属性 - 请求方式(get/post)

二、input

input是表单相关标签,可以放在form标签中做数据的提交和重置

  1. type属性 - 设置标签类型

    a. text(默认值) - 普通文本输入框

    value属性 - 和输入框中的内容是关联

    name属性 - 用来区分不同的数据和对数据进行提交的(因为提交数据的是是以
                        name=value 的形式提交)

    placeholder属性 - 设置输入的提示信息

    disabled属性 - 设置为disabled,表示标签不可用

    maxlength属性 - 设置最多能够输入的字符的个数

    b. password - 密码输入框

    value属性 - 和输入框中的内容是关联

    name属性 - 用来区分不同的数据和对数据进行提交的(因为提交数据的是是以

                        name=value 的形式提交)

    placeholder属性 - 设置输入的提示信息

    disabled属性 - 设置为disabled,表示标签不可用

    maxlength属性 - 设置最多能够输入的字符的个数

    c.radio - 单选按钮

    value属性 - 单选选中的时候被选中的值(选项值)

    name属性 - 提交和区分以外,还可以将相同的name作为一个组,在同一个组中
                       只能选中一个选项

    checked属性 - 值设为checked表示默认选中

    d.checkbox - 复选按钮

    value属性 - 单选选中的时候被选中的值(选项值)

    name属性 - 提交和区分以外

    checked属性 - 值设为checked表示默认选中

    c.button - 按钮

    value属性 - 按钮上显示的文字

    d.submit - 提交按钮

    将当前表单中所有设置了name属性的标签内容,以 name=value的形式提交

    c.reset - 重置按钮

    将当前表单中所有表单相关的标签状态变成初始状态

三、select和textarea

  1. 下拉列表:select-option

    name属性 - 是select属性,用于提交和区分

    value属性 - 是option属性,表示当前选项的值和提交数据

    selected属性 - 是option属性,设置默认选中的项

    option标签内容 - 用来展示选项

  2. optgroup - 选项分组标签

    label属性 - 分组名

  3. 多行文本域 - textarea

    rowss属性 - 设置一次最多能显示的行数(默认2)

    cols属性 - 设置一行的列数

    placeholder属性 - 占位符

    name属性 - 用于区分和提交

    maxlength属性 - 限制最大输入字符的个数

注意: textarea在使用的是代码放在一行


本文链接: http://www.dtmao.cc/news_show_100333.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?