资讯专栏INFORMATION COLUMN

前端菜鸟笔记 Day-2 Form表单

shusen / 1718人阅读

摘要:标签定义表单表单元素表单包含表单元素。沃尔沃马自达雪佛兰奥迪定义待选择的选项,列表通常会默认选择第一个选项,可以使用属性来定义预定义选项。马自达定义多行输入字段。属性规定输入字段允许的最大长度。内容连接类型个人静态博客气泡的前端日记

文章大纲来源:【Day 2】Form表单

HTML表单

表单元素

表单属性

HTML5追加的表单元素

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

标签定义 HTML 表单:


  ...
  form elements
  ...
表单元素

HTML 表单包含表单元素。

表单元素指的是不同类型的:

input元素

复选框

单选按钮

提交按钮

等等

内容引用:HTML表单元素

最重要的表单元素。

元素根据不同的 type 属性可以变化为多种形态。

... ...
text

单行输入框。

password

字符掩码处理的单行输入框。

submit

一个提交按钮。

至于用哪个程序来处理提交的表单数据,在

标签中的action属性中定义。


  ...
  

其中的value属性定义按钮上显示的文字,缺省会显示默认文本(中文环境下为“提交”)。

radio

定义单选按钮。

Male
Female

其中的name属性非常重要,多个radio类型的只有在name属性相同时才具有单选限制。

checkbox

定义多选框,允许选0个或多个。

I have a bike
I have a car

name属性作用类似radio

button

定义按钮

表单属性

value(通用)

name(通用)

readonly(通用)

disable(通用)

type(重要)

checked(radio、checkbox,重要)

size

maxLength

内容引用:HTML Input 属性

value

value属性规定输入字段的初始值,和按钮的显示文字

readonly

readonly属性规定输入字段只读(不可修改)

属性不用赋值,等同于readonly="readonly"

disabled

disabled属性规定输入字段是禁用的(不可用和不可点击)

并且也不会被提交(与readonly不同)。

属性不用赋值,等同于disabled="disabled"

size

size属性规定输入字段的尺寸(以字符计)

这里的尺寸,具体指的是类似输入框宽度的属性。

maxlength

maxlength属性规定输入字段允许的最大长度

超过长度的字符不会被接受(也就是输入不进去),但是用户超过时,input元素本身不会有任何提示。

HTML5追加的表单元素

了解内容,主要是一些新增的Input类型:

email

url

number

range

Date pickers

search

color

目前开发的经验来看,这类组件如果对UI统一需求不高的话,可以尝试使用一点,不过一般情况下都会造轮子或者用现成较为成熟的轮子来代替使用这些。

内容连接:HTML5 Input 类型


个人静态博客:

气泡的前端日记: https://rheabubbles.github.io

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53651.html

相关文章

  • 前端菜鸟笔记 Day-3 CSS基础

    摘要:派生选择器依据元素的位置关系来定义样式。称其为上下文选择器,称其为派生选择器。在现在布局中,选择器常常用于建立派生选择器。和一样,也可被用作派生选择器。 文章大纲来源:【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表(Cascading Style Sheets),即前端常说的CSS。 内容引用:CSS 简介 样式解决了什么问题? HTML...

    mingzhong 评论0 收藏0
  • 前端菜鸟笔记 Day-3 CSS基础

    摘要:派生选择器依据元素的位置关系来定义样式。称其为上下文选择器,称其为派生选择器。在现在布局中,选择器常常用于建立派生选择器。和一样,也可被用作派生选择器。 文章大纲来源:【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表(Cascading Style Sheets),即前端常说的CSS。 内容引用:CSS 简介 样式解决了什么问题? HTML...

    DangoSky 评论0 收藏0
  • Web前端开发学习推荐--菜鸟必看

    Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段:前端基础(HTML / CSS / JavaScript / jQuery)初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!(表单标签)html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

    JerryWangSAP 评论0 收藏0
  • Web前端开发学习推荐--菜鸟必看

    Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段:前端基础(HTML / CSS / JavaScript / jQuery)初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!(表单标签)html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

    shadajin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<