文档章节

HTML5(二)

天宇逍遥heart
 天宇逍遥heart
发布于 2016/09/14 17:39
字数 584
阅读 5
收藏 0
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>

        <!-- 表单分为三个部分
        1. form标签 (包含了数据提交的方式method和服务器地址action)
        2. 表单域 (输入框等等 采集用户信息的标签)
        3. 表单按钮 (提交 复位 等等)
        -->

        <form method="post" action="http://10.0.8.8/sns/my/register.php">

            <!-- 表单域-->
            <!--
            type -- 用该属性来区分input的类型  text(纯文本输入框标签)  password(表示的是密文输入框) email(邮箱输入框)
            name -- 值要与接口文档中接口字段一致
            placeholder -- 空白提示语
            -->
            <input type="text" name="username" placeholder="请输入注册的账号"/><br/>
            <input type="password" name="password" placeholder="请输入注册的密码"/><br/>
            <input type="email" name="email" placeholder="请输入注册的邮箱"/><br/>


            <!-- 表单按钮-->
            <!--
            type :  submit(提交按钮)  点击提交按钮之后 会将用户信息主动提交给服务器
                    reset(重置)   会清空输入框的所有内容
                    button(普通按钮) 如果不绑定事件的话没有任何实际作用


            value:  修改input标签显示内容的
          e -->
            <input type="submit" value="注册"/>
            <input type="reset"/>
            <input type="button" value="普通按钮"/>

        </form>
        <form method="post" action="http://10.0.8.8/sns/my/login.php">
            <input type="text" name="username" placeholder="请输入用户名"/><br/>
            <input type="password" name="password" placeholder="请输入密码"/><br/>
            <input type="submit" value="登录"/>
            <input type="reset"/>
        </form>


        <!--其他表单域-->
        <form>


            <!-- 1.单选按钮 type="radio" -->

            <!-- checked 默认选中某一项-->
            <p>您的性别是?</p>
            <input type="radio" name="sex" checked/><span>男</span>
            <input type="radio" name="sex"/><span>女</span>
            <input type="radio" name="sex"/><span>未知</span>

            <!-- 2. 多选框 type="checkbox"-->
             <p>你喜爱的女神有?</p>
            <input type="checkbox" name="god"/><span>高圆圆</span>
            <input type="checkbox" name="god"/><span>范冰冰</span>
            <input type="checkbox" name="god"/><span>林心如</span>

            <!-- 3. 下拉菜单-->
            <select>
                <option>河北省</option>
                <option>山东省</option>
                <option>河南省</option>
                <option>江苏省</option>
                <option>浙江省</option>
                <option>安徽省</option>
                <option>黑龙江省</option>
            </select>

            <!-- 4. 选择文件 type="file"-->
            <input type="file"/>

            <!-- 5.选择日期-->
            <!--
            type="date" 年月日
            type="datetime" 年月日 时分
            type="time" 时分
            type="week" 周数
            -->
            <input type="date"/>
            <input type="datetime"/>
            <input type="time"/>
            <input type="week"/>


            <!-- 6. 选择颜色 type="color"-->
            <input type="color"/>

            <!-- 7.进度条  type="range"-->
            <input type="range" min="0" max="100" value="30"/>

            <!-- 8. 设置数字type="number"-->
            <input type="number"/>

            <!-- 9. 设置URL-->
            <input type="URL"/>

            <!-- 10. 可以表示图片-->
            <input type="image" src="../img/icon.png"/>

            <input type="submit"/>

        </form>


    </body>
</html>

 

© 著作权归作者所有

上一篇: HTML(三)
下一篇: HTML5(一)
天宇逍遥heart
粉丝 1
博文 12
码字总数 12795
作品 0
上海
私信 提问
localStorage 和 sessionStorage 简介

导读 一、 简述 sessionStorage 和 sessionStorage 是 HTML5 新增的两个特性,这两个特性主要是用来作为会话存储和本地存储来使用的,解决了 cookie 存储空间不足的问题; sessionStorage 属...

qianyin925
05/05
0
0
选择一项后,页面跳转保持该选项

需求:假如2个页面上有同样上图的3个选项,当用户在第一个页面选择了第2项之后,跳转至第二个页面应该也同样选择第2项。并且当页面关闭后再打开仍然保持选择。 方案一: localStorage watch...

徐金俊
2018/10/30
0
0
HTML5编程之旅 第6站Web Storage

Web Storage,有时也称为DOMStorage,它提供在Web请求之间持久化数据,在此之前,远程Web服务器需要存储客户端和服务器间交互使用的所有相关数据。利用Web Storage,开发者可以将需要跨请求重...

倪伟伟
2014/03/26
104
0
移动Web应用程序开发 HTML5篇 (四) 多媒体API

介绍 本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具:HTML5,JavaScript, CSS3。 本篇是HTML5介绍的第四篇,主要介绍HTML5的多媒体API。 相关文章: 移动Web应用...

红薯
2012/02/27
1K
0
手把手教你开发Chrome扩展三:关于本地存储数据

手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5中的localStorage localS...

Ryan-瑞恩
2012/12/22
238
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部