一、表单

<form id="" name="" method="post/get" action="负责处理的服务端"> id不可重复;name可重复;get提交有长度限制,并且编码后的内容在地址栏可见,post提交无长度限制,且编码后内容不可见。

</form>

1、文本输入

文本框<input type="txt" name="" id="" value="" />

注:上面设置value值,表示设置默认值

密码框<input type="password" name="" id="" value="" />

文本域<textarea name="" id="" cols=""(字符多少) rows=""(几行高)></textarea>

隐藏域<input type="hidden" name="" id="" value="" />

2、按钮

提交按钮<input type="submit" name="" id="" disabled="disabled" value=""/>点击后转到form内的提交服务器的地址

注:上面中设置value值表示运行时上面显示的文字。

重置按钮<input type="reset" name="" id="" disabled="disabled" value=""/>

普通按钮<input type="button" name="" id="" disabled="disabled" value=""/>

图片按钮<input type="image" name="" id="" disabled="disabled" src="图片地址"/>

附:

disabled,使按钮失效;enable,使可用。

3、选择输入

单选按钮组<input type="redio" name="" checked="checked" value=""/>   name的值用来分组;value值看不见,是提交给程序用的;checked,设置默认选项。

注:单选按钮组选中后不可取消。

复选框组<input type="checkbox" name="" checked="checked" value=""/>

注:checked="checked"表示一上来就选中,且复选框可选中可取消。

文件上传<input type="file" name="" id="" />

<label for=""></label>

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

下拉列表框

<select  name="" id="" size="" multiple="multiple">    --size=1时,为菜单;>1时,为列表。multiple为多选。

<option value="值">内容1</option>

<option value="值" selected="selected">内容2</option>    --selected,设为默认

<option value="值">内容3</option>

</select>

综上HTML程序显示:

 

运行结果显示:

实例分析:做邮箱界面程序显示

运行结果显示:

二、图片热点

规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果。

示例:

设计界面:矩形和圆形的地方在运行时,鼠标放上会变成小手状,表示有链接。

三、网页划区和拼接

划区:在一个网页里,规划出一个区域用来展示另一个网页的内容。

示例:

拼接:在一个网络页面内,规划出多个页面窗口,以表格拼接的形式展示出来。(可以想象一下监控画面,多个画面同时显示)

示例:

html 基础 表单的更多相关文章

  1. Bootstrap系列 -- 11. 基础表单

    表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...

  2. bootstrap 基础表单 内联表单 横向表单

    bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...

  3. JavaScript | 基础表单验证(纯Js)

    ———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...

  4. bootstrap 基础表单

    表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. ☑   LESS版本:对应源文 ...

  5. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  6. JavaScript:基础表单验证

    在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个 ...

  7. h5标签基础 表单form

    表单:收集用户信息 一. 组成: 文本框<input type="text"/> 密码框<input type="password"/> ...

  8. php编程 之php基础 表单

    1 ,php表单 当处理php表单的时候,php能把来自html页面的表单元素自动变成可供php脚本使用的数据. 比如: <html> <head> <meta char ...

  9. JS基础-表单元素-新表单元素-js概述

    1.表单元素 1.input元素 1.隐藏域和文件选项框 1.隐藏域 <input type="hidden"> 要提交给服务器的数据,但是不想展示给用户看可以放在隐藏 ...

  10. vue基础——表单输入绑定

    一.基础用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选择正确的方法来更新元素. 尽管有些神 ...

随机推荐

  1. Using Fast Weights to Attend to the Recent Past

    Ba, Jimmy, et al. "Using Fast Weights to Attend to the Recent Past." Advances In Neural In ...

  2. landa语法

    sg_orm看当前sql信息 db.IsEnableLogEvent = true; db.LogEventStarting = (sql, pa) => { var t = 0; }; //出 ...

  3. C语言中文网

    网址:http://c.biancheng.net/cpp/ 涵盖如下:

  4. 如何连接OracleRAC

    查看tnsname 查看服务器上tnsname.ora内容: 位置:/oracle/db/product/11.2.0/network/admin/tnsname.ora   连接rac 根据以上信息 ...

  5. 马普尔小姐探案集S02E03【熙阳岭的疑云】

    --Why the husband love his wife so much? --Because she was the last one in their family.

  6. 简单理解Javascript中的call 和 apply

    javascript中面向对像的能力是后来加进来的, 为了兼容性, 所以整出了很多奇特的东西, function Animal(){ this.name = "Animal"; t ...

  7. C# 中利用反射机制拷贝类的字段和属性(拷贝一个类对象的所有东西付给另一个类对象,而不是付给引用地址)

    from:https://blog.csdn.net/poxiaohai2011/article/details/27555951 //C# 中利用反射机制拷贝类的字段和属性(拷贝一个类对象的所有东西 ...

  8. 【BZOJ4566】[Haoi2016]找相同字符 后缀数组+单调栈

    [BZOJ4566][Haoi2016]找相同字符 Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两 个子串中有一个位置不同 ...

  9. 微信小程序入门学习-- 简易Demo:计算器

    简单学习下微信小程序 官网 简易教程 · 小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 需要通过开发者工具,来完成小程序创建和代码编辑. 下载安装,运行 ...

  10. 巨蟒python全栈开发-第4天 列表&元组&range

    今日内容大纲 1. 什么是列表 定义: 能装对象的对象 在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求 列表存在索引和切片. 和字符串是一样的. 2. 相关的增删改查操 ...