表单

作者: lucky_yao | 来源:发表于2020-09-18 10:30 被阅读0次

<form>标签:

——表单所有的内容全部都在<form>标签里面

<input>标签

——<input> 标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

属性: type(type 属性规定 input 元素的类型。)

=======↓

“text(定义单行的输入字段,用户可在其中输入文本。默认宽度为20 个字符。)”

“password(定义密码字段。该字段中的字符被掩码。)”

“button(定义可点击按钮,多数情况下,用于通过JavaScript 启动脚本。)普通按钮

“submit(定义提交按钮。提交按钮会把表单数据发送到服务器。)”

“reset(定义重置按钮。重置按钮会清除表单中的所有数据。)”

“radio(定义单选按钮。)”

“checkbox(定义复选框。)”

“”

Name(name 属性规定 input 元素的名称。name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。)=“元素的名称。”

注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

checked默认选择属性

Value(属性为 input 元素设定值,提示信息。)=“设定值”

<select>下拉列表

属性 multiple 变成滚动条形式

size    一次展现一个

selected="selected" 默认选中

hidden 隐藏域

image 图片按钮

file 文件上传

placeholder 命名提示

表单 的所有内容放在 form 标签里面

<form>

<input type="text" name="" id="" value="" />

<input type="password" name="" id="" value="" />

<input type="button" name="" id="" value="" />

<input type="submit" name="" id="" value="" />

<input type="reset" name="" id="" value="" />

<input type="radio" name="" id="" value="" checked="checked"/>

<input type="checkbox" name="" id="" value="" />

<select name=""> 下拉列表

<option value=""></option>

<option value=""></option>

<option value=""></option>

</select>

<textarea name="" rows="" cols=""></textarea>

<!--hidden  隐藏域-->

<input type="hidden" name="" id="" value="1212" />

<!--图片按钮-->

<input type="image" src='../第二章 基本标签/1.png' />

<!--文件上传-->

<input type="file" name="" id="" value="" />

</form>

超链接标签<a></a>

属性:

href用来指定链接的地址,可以是网页文件,也可以是图片。

空链接用”#”表示;

title:鼠标移上去提示的信息;

target:用来定义链接打开的目标窗口.般用于图片加载失败时的文本提示。

title:鼠标移过时显示的文字(对SEO

属性值可以是_blank、_self;_top; _parent

_self在原窗口中打开,为默认值。

_blank在新窗口打开

图片标签:<img>

属性:src 表示“源”的意思。“src”属性的值是所要显示图像的URL。

width 宽度

height 高度

alt 给图像显示一个“交互文本”。 一有帮助)

border: 给图片加一个边框

图片与文字对齐方式:align: top/bottom/middle

常用的图片格式:

jpeg/jpg 有损压缩,适合大图,压缩比率好

png 无损压缩,支持透明压缩(最大限度还原图片清晰度),适合小图

gif 有损压缩,支持透明压缩 压缩比率不是很好。 支持动态效果

Meta标签项:(了解)

<meta name="keywords" content="插入关键字"> 设置页面关键字

<meta name="description" content="设置页面说明"> 设置网页说明

<meta name="author" content="作者的姓名"> 添加作者信息

<meta charset="UTF-8"> 设置网页编码

<meta http-equiv="refresh" content="跳转的时间;URL=跳转到的地址"> 设置网页的定时跳转

表单控件(类型):

单行文本输入框:text;

多行文本框:textarea;

密码框:password;

单选按钮:radio;

点击按钮:button;

提交按钮:submit;

重置按钮:reset;

复选框:checkbox;

时间:date;

颜色:color;

数字:number

上传文件:file;

多行文本框:textarea

input标签属性:

type 控件的类型              – value 指定默认值   

– size 文本框显示的长度

– maxlength  用户可以输入的最多字符

– name 用于服务器获取数据

disabled  获取或设置表单控件是否禁用,背景有阴影

readOnly  控件只读属性 不能更改只能复制和读取

required  必填项,如果不写,无法提交(一定要写提交方式)

checked  默认选中

下拉列表:

<select>

          <option>...</option>

            <option>......</option>

  </select>

相关文章

  • bootstrap之form表单

    表单布局 垂直表单(默认) 内联表单 水平表单 垂直表单或基本表单(display:block;) 创建基本表单的...

  • 【读书笔记+思考】移动设备表单设计

    在移动界面中,常见的表单模式有:登录表单;注册表单;核对表单;计算表单;搜索表单;多步骤表单;长表单等 登录表单:...

  • bootstrap表单

    表单布局 垂直表单(默认) 内联表单 水平表单 垂直表单或基本表单 基本的表单结构是 Bootstrap 自带的,...

  • bootstrap 表单布局的三种方式

    三种 垂直表单(默认) 内联表单 水平表单 垂直表单 效果 内联表单 效果 水平表单 效果 参考:https://...

  • 表单相关总结

    表单?表单作用:收集用户信息。表单组成:表单域、表单控件、提示信息。 表单域常用属性 常用属性: name=...

  • 网页设计:HTML表单标签

    表单包含三个基本组成部分:表单标签、表单域、表单按钮。 1,表单标签 HTML 表单用于收集用户输入,表单使用 ...

  • 2019-04-09 表单(5)

    表单布局Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 1.垂直或基本表单 ...

  • 动态表单实现

    angular动态表单 地址: angular表单 vue动态表单 地址: vue表单

  • bootstrap表单

    垂直表单(默认) 内联表单 水平表单 垂直表单 也称基本表单基本的表单结构是 bootstrap 自带的创建基本表...

  • 前端视频-day3(1)

    表单 表单不是表格,表单的核心是数据。 表单标签的构成和形式: 表单项 下面是我写的一个简单的注册表单 注意:表单...

网友评论

      本文标题:表单

      本文链接:https://www.haomeiwen.com/subject/yymhyktx.html