H5学习笔记（表单、框架）

最新推荐文章于 2024-03-22 14:50:38 发布
最新推荐文章于 2024-03-22 14:50:38 发布
阅读量570 收藏 3
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lol666111/article/details/118366511
版权

表单标签

  • 表单用于收集不同类型的用户输入数据

  • form常用属性

  • form标签定义表单

  • 属性名代码描述
    action<form action ="服务器地址"></form>将表单的数据提交到该地址上处理
    method<form method ="提交方式"></form>get:不安全、数据有限 post:安全、没有限制
    enctype<form enctype="编码方式"></form>applocation/x-www-form-urlcoded(默认，普通表单)multipart/form-data(文件上传使用)
    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <h1>form标签：用来定义一个表单</h1>
    <ul>
        <li>action:表单数据提交的服务器地址</li>
        <li>method：表单数据提交方式  get和post</li>
        <li>enctype:表单的编码方式，普通表单(默认：application/x-www-form-urlencoded)、文本标签（text/plain）、文件标签(multipart/form-data)</li>
    </ul>
<h2>用户登录</h2>
    <form action="" method="post" enctype="text/plain" >
        用户名:<input name ="username" type="text"/><br/>
        密码:<input name="pwd" type="password"/>
        <input type="submit" value="登录" />
    </form>
</body>
</html>

  • 表单元素

  • name属性必须包含，否侧不能提交给服务器，value时提交的数据

    • input元素：不同type值呈现为不同状态

属性值描述代码说明
text单行文本框<input type="text"/>
password密码框<input type = "password"/>输入信息显示为 ***
radio单选按钮<input type="radio"/>radio有id属性，多个radio，id相同时，一次只有一个显示被选中
checkbox复选框<input type="checkbox"/>checkbox的name属性使用同一个name
submit提交按钮<input type="submit"/>submit不需要name属性，因为submit的信息不需要传输给服务器
reset重置按钮<input type="reset"/>重置表单内的所有选项，只对当前表单有用
button普通按钮<input type="button"/>
image图片提交按钮<input type="image" src="..."/>
file文件<input type="file"/>当使用文件属性值时，form表单的编码必须是 multiparty/form-data
hidden隐藏域<input type = "hidden"/>

  • 表单元素

  • 属性值描述代码
    Email邮箱<input type="email"/>
    number数值<input type="number"/>
    range滑块<input type="range"/>
    color取色框<input type="color"/>
    date日期框<input type="date"/>
    time时间框<input type="time"/>

  • 其他表单元素

    • 下拉列表

      • 下拉列表的属性：operator

      • selected:默认选中

    • textarea

      • 文本域

      • cols:列数

      • rows：行数

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
</head>
<body>
<h1>表单元素：使用input标签来表示，不同type值显示状态不同</h1>
<ul>
    <li>text:文本框</li>
    <li>password:密码框</li>
    <li>radio:按钮，使用同一个id时，只能选中一个</li>
</ul>
<h2>用户注册</h2>
<form action="" method="post" enctype="multipart/form-data">
    <table>
        <tr>
            <td>用户名</td>
            <td>
                <input name="username" type="text"/>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input name="pwd" type="password"/>
            </td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td>
                <input name="pwd2" type="password"/>
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input name="sex" type="radio" value="男" checked="checked"/>男
                <input name="sex" type="radio" value="女"/>女
            </td>
        </tr>
        <tr>
            <td>爱好</td>
            <td>
                <input name="hobby" type="checkbox" value="code"/>写代码
                <input name="hobby" type="checkbox" value="game"/>玩游戏
                <input name="hobby" type="checkbox" value="smoke"/>抽烟
            </td>
        </tr>
        <tr>
            <td>头像</td>
            <td>
                <input name="photo" type="file"/>
            </td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td>
                <input name="email" type="email"/>
            </td>
        </tr>
        <tr>
            <td>年龄</td>
            <td>
                <input name="age" type="number"/>
            </td>
        </tr>
        <tr>
            <td>滑块</td>
            <td>
                <input name="滑块" type="range" min="0" max="100" />
            </td>
        </tr>
        <tr>
        <td>出生日期</td>
        <td>
            <input name="date" type="date"/>
        </td>
        </tr>
        <tr>
            <td>所在城市</td>
            <td>
                <select name="city" >
                    <option value="beijing">北京</option>
                    <option value="henan" selected="selected">河南</option>
                    <option value="shanxi">陕西</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>个人简介</td>
            <td>
                <textarea name="introduce" cols="7" rows="7" >
​
                </textarea>
            </td>
        </tr>
        <tr>
            <td>喜欢的颜色</td>
            <td>
                <input name="mycolor" type="color"/>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input name="id" type="hidden" value="123456789"/>
                <!--按钮数据不用提交，所以不需要name属性-->
                <input type="submit" value="提交"/>
                <input type="reset" value="重置"/>
                <!--普通按钮和JS配合使用-->
                <input type="button" value="普通按钮" οnclick="alert('你点我干什么？')"/>
                <input type="image" src="" value="图片按钮"/>
                <!--a使用button标签-->
                <button>提交</button>
                <button type="button">普通按钮</button>
                <button type="reset">重置按钮</button>
                <button type="submit">提交按钮</button>
            </td>
​
        </tr>
    </table>
</form>
</body>
</html>

框架标签

  • 框架：

    • 使用框架可以在同一个浏览器窗口中显示不止一个页面

    • 每份HTML文档称为一个框架，并且每个框架都独立于其他的框架

  • frameset：框架集

    • rows/clos：规定了每行或每列占据屏幕的面积

    • frameborder：是否有框架边框

  • frame：框架

    • noresize="noresize"：不能调整每个框架的大小

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架标签</title>
</head>
<!--frameset:框架集标签：上下分割页面-->
<frameset rows="15%,85%">
    <frame src="03顶部页面.html"/>
    <frameset cols="20%,*">
        <frame src="03left.html" name="leftFrame"/>
        <frame src="03right.html" name="rightFrame"/>
    </frameset>
</frameset>
</html>
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顶部页面</title>
</head>
<body>
欢迎进入系统
</body>
</html>
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下左</title>
</head>
<body>
<ul>
    <li>
        <a href="02表单元素.html" target="rightFrame">信息注册</a>
    </li>
    <li>
        <a href="班级信息.html" target="rightFrame">查看班级</a>
    </li>
    <li>
        <a href="学生信息.html" target="rightFrame">学生信息</a>
    </li>
    <li>
        <a href="就业数据.html" target="rightFrame">就业数据</a>
    </li>
​
</ul>
</body>
</html>
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下右</title>
</head>
<body>
<h2>详细信息</h2>
</body>
</html>
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
</head>
<body>
<h3>
    <ul>
        <li>姓名：</li>
        <li>性别：</li>
        <li>年龄：</li>
    </ul>
</h3>
</body>
</html>
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>班级信息</h2>
</body>
</html>

其他标签

  • 其他标签

    • 标签描述
      meta定义网页元信息
      link链接样式表
      script定义JS代码、关联JS文件

  • 特殊字符

    • 特殊字符描述
      &nbsp（;）空格
      &gt(;)>
      &lt(;)<
      &reg(;)注册符号
      &quot(;)双引号
      &yen(;)人名币

总结

  • HTML

    • 制作网页的一门标签或标记语言

  • 常用标签

    • 结构标签：html, head title body

    • 排版： 注释（<!---->） < br / > <p> <hr/>

    • 标题h1(大)---h6(小)

    • 标签容器：div span

    • 文字：font

    • 格式化;b strong em sub sup

    • 列表 ： ul ol

    • 表格： table tr td th

    • 图片： img

    • 链接 a

  • 表单标签：form

  • 常见表单元素类型

    • 文本框

    • 密码框

    • 单选按钮

    • 复选框

    • 提交按钮

    • 普通按钮

    • 重置按钮

    • 文件

  • 框架标签：frameset frame

  • 特殊符号

Tom with Jerry
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5基础笔记五（标签之表单）
qq_55006020的博客
06-27 1210
表单也是一个大内容form表单表单在wep网页中是用来给用户填写信息的，从而能采集用户的联系，使网页具有交互的功能所有用户输入内容的地方都用表单来写，如登录框，搜索框，选择框等表单的属性有action 行动 也就是服务器地址name 表单的名称method 有get和post两种方法 用来提交数据给服务器表单的三要素1，表单标签 fomr表单标签2，表单域 input3，表单按钮表单的元素文本框 文本框通过input来设置。
h5前端学习笔记
03-21
我的h5前端学习笔记
H5表单
weixin_30861797的博客
04-10 985
一、<form>标签 用户填写表单进行提交后，将表单信息从浏览器传送到服务器，服务器处理后，将用户所需信息传送回浏览器，这样就实现了网页的交互性。 表单标签<form></form>在一般情况下，处理程序属性action和传送方式属性method，是必不可少的。 （1）处理程序属性——action action属性存储的是处理表单的数据脚本或程序，这个值...
H5表单控件
最新发布
qq_64662981的博客
03-22 399
编程的重点，属性，比如按钮控件，按钮上的文字是属性，按钮的样式是属性，按钮的状态是属性。但是输入类的控件一般会以输入信息为主要用途，用于输出，需要特别考虑一下，是否合适，当然，还需要设置控件。注意，输入类的控件一般同时可以用来输出，例如：矩形计算器中，面积和周长数据的输出用的是文本框。在事件处理代码中做什么呢？可以控制控件或者界面元素的属性，包括：文字内容、控件或界面元素的位置、颜色、外观，等。分类二：按照控件信息的输入、输出和操作，等功能分类。而控件的方法用的比较少。输出类的控件只能输出，没有任何歧义。
HTML5表单的学习代码
weixin_44034883的博客
01-19 637
HTML5表单的学习 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http
FormData表单数据对象（h5）快速收集表单信息（注册登录时使用的）
王项雨 的博客
05-09 2231
FormData表单数据对象（h5）快速收集表单信息（注册登录时使用的） 使用注意： 1.FormData是<form></form>标签专用的，（最好加个action） 2.使用的时候form标签必须设置name属性，//一个name对应一个input的values 3.ajax请求时不能设置setRequestHeader();//防止格式混乱 4.用法：var f = document.getElementsById("form的id") var fd = new Form
H5新表单
qq_39565864的博客
07-29 249
色块 选取范围 邮件 数字选择框 进度条 网页进度条 > 表单嵌套         charset="UTF-8">         type="color" name="" id="" value="" />   type="
前端学习（一）——H5学习笔记
08-09
HTML入门
PHP个人学习笔记
03-13
PHP个人学习笔记
白鹭H5游戏框架
01-31
一套比较完整的白鹭h5游戏框架，白鹭引擎 ewing编辑器
H5表格、表单、框架.ppt
04-27
H5表格、表单、框架.ppt，包含介绍和例子，ppt！H5表格、表单、框架.ppt，包含介绍和例子，ppt！
h5新特性总结&表单实现
还没想好
09-06 4723
今天开始学h5和css3的新特性，边学边持续更新。 1.语义化标签： header，nav，main，article，aside，footer （1）IE9可能支持h5，但是行级元素在设置宽度的时候是失效的。并不是所有的浏览器都能够识别出 &lt;main&gt;，需要给它转换为块级元素： display:block; （2）IE8以及IE8以下不支持h5：不认识语义标签，完全无效；...
前端H5可视化拖拽布局器-Layui,Bootstrap等各种UI-可视化表单设计器
热门推荐
adyuebanwan的专栏
05-08 7万+
本节介绍一款前端H5可视化布局器 MagicalDrag2.1.5 由js+css+html编写而成 软件官方在线使用地址：http://layuiout.magicalcoder.com/layui 在线使用：免费 优点在于 功能强大，可以自由嵌入各种web项目，有html+css+js编写而成,可以基于各种设备响应式设计布局 软件基本截图主界面 （图片拉扯了好难看） 各种下拉编辑...
最有范儿的H5制作工具—应用之星之表单控件详解
ddwendy的专栏
06-17 4944
H5页面在线制作平台大家应该都很熟悉了，它的出现使招聘、邀请、宣传都变得很精致。最近，应用之星也推出了H5页面制作，这个平台的功能很强大，不仅能做H5页面，还能制作App。其中，平台的表单控件功能具有很强的互动性，打破了H5单一的传播局面。今天，我就来详细说一下这个表单控件。 首先，登陆应用之星网站(http://www.appstar.com.cn/)，注册登录后，点击应用制作
html个人情况框架布局,HTML学习，常用常记（区块，布局，表单，框架）
weixin_39687542的博客
06-05 108
HTML 区块元素大多数 HTML 元素被定义为块级元素或内联元素块级元素在浏览器显示时，通常会以新行来开始(和结束)实例: , , , HTML 内联元素内联元素在显示时通常不会以新行开始实例: , , , HTML 元素HTML 元素是块级元素，它可用于组合其他 HTML 元素的容器 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行如果与 CSS 一同使用， 元素...
h5 表单
weixin_42595284的博客
09-03 1343
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; fieldset{ width: 50
H5的一些基本标签
tianruine的博客
01-13 1097
1.target属性 _blank 在新窗口中打开被链接文档。 _self 默认。在相同的框架中打开被链接文档。 _parent 在父框架集中打开被链接文档。 _top 在整个窗口中打开被链接文档。 framename 在指定的框架中打开被链接文档。 2.相对路径 （1）同级，直接写目标文件架 （2）父级找子级：与父级文件夹下的文件夹/目标文件夹 （3）子级找父级：../目标文件夹【/.跳出文件夹】../../即子级找父级的父级 3.base写在head里，可以替代a标签中的属性，例如，target:_
html5 frameset5内嵌框架集
anywen5590的博客
10-15 722
利用html5 frameset内嵌框架简单做一个网页，网页的布局大体如下： 我们可以将其分为四个部分： 第一部分：top图片栏 第二部分：left链接栏 第三部分：right内容栏 第四部分：网页整体 网页的要求是水平框架的分割比例是30%:70%，垂直框架的分割比例是20%:80%。 我们的思路是先写好单个的模块，包括： 模块 html文件名 ...
HTML <textarea> 标签的 rows 属性
weixin_33909059的博客
09-27 464
2019独角兽企业重金招聘Python工程师标准>>> ...
h5 react 框架
05-13
React 是一个用于构建用户界面的 JavaScript 库，它由 Facebook 开发并维护。React 的主要特点是组件化和虚拟 DOM，它使得开发者可以轻松地构建可复用的 UI 组件，并且能够高效地更新 DOM，从而提高应用程序的性能。 在 React 中，我们可以使用 JSX 语法来描述组件的 UI，然后通过 React 将它们渲染到页面上。而 h5 是 HTML5 的缩写，指的是 HTML 的第五个版本，它在移动端的应用非常广泛。因此，我们可以使用 React 来构建适用于移动端的 Web 应用，也就是所谓的 h5 应用。 目前市面上有很多基于 React 的 h5 框架，比如 Ant Design Mobile、Mint UI 等等。这些框架提供了丰富的组件和样式，可以帮助开发者快速构建美观、高效的 h5 应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值