文档章节

29.HTML--Form 表单

Lucky_Me
 Lucky_Me
发布于 2017/08/08 18:18
字数 615
阅读 10
收藏 0

1.效果

2.代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Form表单</title>
    </head>
    <body>
        <h2 align="center">注册</h2>
        <!--<form></form>有两个属性 一个是action是表示要将数据提交到的地方(如服务器) 另一个是请求方式(主要GET默认的可以在搜索栏看到提交的信息 另一个是POST它提交的信息我们在搜索栏看不到提交的信息 安全切上传文件大小不限制)-->
        <!--表单必须用form标签来写-->
        <form action="#" method="get">
            <!--1.
                作者:offline
                时间:2017-08-08
                描述:input 框
           -->
           <table align="center" bgcolor="greenyellow">
               <tr>
                   <td align="right" >用户名 :</td>
                   <td><input type="text" name="username" placeholder="请输入姓名" size="50px" maxlength="10" autofocus="autofocus" />    </td>
               </tr>
                <tr>
                    <td align="right">密 码:</td>
                    <td><input type="password" name="password" placeholder="请输入密码" size="50px"  /></td>
            </tr>
            <tr>
                <td align="right">确认密码:</td>
                <td><input type="password" size="50px" placeholder="请确认密码" />
                
            </tr>
                 <br />
                 <!--2.
                     作者:offline
                     时间:2017-08-08
                     描述:单选按钮
                 -->
                 <tr>
                     <td align="right">性   别:</td>
                     <td> <input type="radio"  name="sex" value="0"/>男
                     <input type="radio"  name="sex" value="1"/>女</td>
                 </tr>
                        <!--3.
                            作者:offline
                            时间:2017-08-08
                            描述:浮选按钮
                        -->
                        <tr>
                            <td align="right">爱好: </td>
                            <td><input type="checkbox" name="hobby" value="1"  checked="checked"/>看书
                                <input type="checkbox" name="hobby" value="2" />跑步
                                <input type="checkbox" name="hobby" value="3" />旅行
                                <input type="checkbox" name="hobby" value="4" />玩游戏
                            </td>
                            
                        </tr>
                        <!--4.
                            作者:offline
                            时间:2017-08-08
                            描述:下拉框选择select
                        -->
                        <tr>
                            <td align="right">籍贯:</td>
                            <td>
                                <select name="city">
                                <option value="010" selected="selected">北京</option>
                                <option value="029">西安</option>
                                <option value="024">沈阳</option>
                                <option value="021">上海</option>
                                </select>
                            </td>
                        </tr>
                        <!--5.
                            作者:offline
                            时间:2017-08-08
                            描述:图像
                        -->
                        <tr>
                            <td align="right">照片:</td>
                            <td>
                                <input type="file" name="photo">
                            </td>
                        </tr>
                        <!--6.
                            作者:offline
                            时间:2017-08-08
                            描述: 邮箱
                        -->
                        <tr>
                            <td align="right">邮箱:</td>
                            <td><input type="email" placeholder="请输入邮箱" required="required" name="email" style="width: 380px;"/ ></td>
                        </tr>
                        <!--7.
                            作者:offline
                            时间:2017-08-08
                            描述:textarea
                        -->
                        <tr>
                            <td align="right">自我介绍:</td>
                            <td>
                                <textarea placeholder="自我介绍" style="width: 380px;" name="self"></textarea>
                            </td>
                        </tr>
                        <!--8.
                            作者:offline
                            时间:2017-08-08
                            描述:注册按钮,就是提交 将数据上传
                        -->
                        <tr>
                            <td align="right">注册:</td>
                            <td> <input type="submit" id="save"/></td>
                        </tr>
                        <!--9.
                            作者:offline
                            时间:2017-08-08
                            描述:重置 按钮
                        -->
                        <tr>
                            <td align="right">重置</td>
                            <td><input type="reset"/></td>
                        </tr>
                        </table>
        </form>
    </body>
</html>
 

© 著作权归作者所有

上一篇: 30.table 表格
Lucky_Me
粉丝 17
博文 234
码字总数 89927
作品 0
美国
私信 提问
Thinkphp5.0 PHPExcel 数据表格导出导入

1、先在github里面下载PHPexcel这个类库 或者通过以下链接下载PHPexcel类库。 http://www.php.cn/xiazai/leiku/1491 2、解压之后把它复制到extend里面 控制器代码如下: 调用excel方法就可以生...

KaFei001
07/25
0
0
Google C++ Mocking Framework使用简介

http://www.cppprog.com/2009/0101/29.html

Waiting4you
2009/05/05
465
0
[ExtJs5.1.0系列-第6天]Form表单 之 表单面板(Ext.form.Panel)

对于从事Web开发的程序员来说,接触最多的就是表单的操作。传统的HTML表单给人一种功能单一风格朴素的印象。这个问题在ExtJs的表单上有了很大程度的改善,ExtJs对于常用表单功能给出了优秀的...

LSantorini
2015/10/01
2.3K
0
表单防重复提交

防止表单重复提交 介绍了使用 redirect 技术防止表单提交,但是 redirect 解决不了后退到表单页面时重复提交表单,为了解决这个问题,加入了 token 的机制。如果每个 form 相关的处理方法中都...

NotFoundException
2015/09/06
316
0
一个 React Form 组件的重构思路

本文发布于 我的博客 最近对团队内部 React 组件库(ne-rc)中的 Form 组件进行了重构,记录一下思考的过程。 一些前置定义: 名词 定义 表单 Form 组件 子表单 嵌套在 Form 下面的类似 Inpu...

moqiao
2017/03/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部