HTML之学习笔记(十)表单元素
html表单元素的基本格式为(必须包含在form标签中)
大致可以分为文本类、按钮类、复选框和单选框、文件选择几类
1.文本类
文本框标签<input type = “text“ />,属性size文本框的宽度、maxlength可输入的最大字节长度、readonly=“readonly”文本只读,无法修改
密码框标签<input type = “password” />,在页面显示为黑色小圆点
隐藏标签(隐藏域)<input type=“hidden” />,不会对页面显示有任何影响,常用于保存页面状态的值
文本域标签<textarea></textarea>,属性rows和cols(column),用于显示用户输入多个数据文本,文本域中的数据会原始的输出(保留原有格式),可以使用value属性得到文本域中的数据。
2.按钮类
提交按钮标签<input type=“submit” />
重设按钮标签<input type=“reset” />,恢复页面的刚加载时的原始状态。
按钮标签<input type=“button” onclick=“”/>,可以为点击按钮添加点击事件。
图像标签<input type=“image” src=“URL” />,点击图片,将点击的位置坐标进行提交。
3.复选框、单选框和文件上传
复选框标签<input type=“checkbox” id=""/><label for=“id”>文本</label>,多个组合在一起的小方块,由用户进行多选,常用属性checked=“checked”默认选中,使用label标签将文字包起来,使用for属性关联到指定的checkbox的id
单选按钮签<input type=“radio” />,使用时应注意,单选框总是几个组合在一起,要求都有相同的name属性,用属性checked=“checked”默认选中。设置value属性便于获得选中的数据。
文件选择标签<input type=“file” />,form的enctype必须设置为multipart/form-data、method属性为POST
<html> <head> <title></title> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> <form> 复选:<br /> <input type="checkbox" id="item1" /><label for="item1">选项一</label> <input type="checkbox" id="item2" /><label for="item2">选项二</label> <input type="checkbox" id="item3" /><label for="item3">选项三</label> <br/>你的性别是: <input type="radio" name="sex" value="m" checked="checked"/>男 <input type="radio" name="sex" value="f" />女 </form> </body> </html>
运行结果
HTML之学习笔记(十)表单元素的更多相关文章
- AngularJS 1.2.x 学习笔记(表单校验篇)
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- Symfony2学习笔记之表单
对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...
- 20151223jquery学习笔记--Ajax表单提交
传统的表单提交, 需要多次跳转页面, 极大的消耗资源也缺乏良好的用户体验. 而这款form.js 表单的 Ajax 提交插件将解决这个问题.一. 核心方法官方网站: http://malsup.com ...
- JS学习笔记7_表单脚本
1.获取表单及表单元素引用的方式 var mForm = document.forms[formName];获取表单引用 mForm.elements[elemName]获取表单元素,如有同名的,则得 ...
- Html5学习进阶四 表单元素和表单属性
HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...
- Vue.js学习笔记--3.表单输入绑定
整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...
- Vue 学习笔记之 —— 表单输入绑定
Vue 中文文档 https://cn.vuejs.org/ 不多说,直接上干货. v-model 指定,用来在input textarea 等表单元素上创建双向数据绑定,负责监听用户的输入事件,以及 ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- SpringMVC学习笔记:表单提交 参数的接收
SpringMVC可以接收原生form表单和json格式数据 有一个名为Book的model,其中的属性如下: 字符串类型的name,数字类型的price,数组类型的cover,集合类型的author ...
随机推荐
- Delphi使用XmlHttp获取时间
uses ComObj, DateUtils; procedure TForm1.Button1Click(Sender: TObject); var XmlHttp: Variant; datetx ...
- httpClient download file(爬虫)
package com.opensource.httpclient.bfs; import java.io.DataOutputStream; import java.io.File; import ...
- ubuntu KDE/GNOME vnc
- Ubuntu 12.04下安装ibus中文输入法
这是最完整的安装方法: ibu是一个框架,可以支持多种输入法,像是pinyin,五笔等. 1,安装ibus框架 终端输入以下命令: sudo apt-get install ibus ibus-clu ...
- MySQL必知必会 学习笔记(一)
第一章 了解SQL 模式: 关于数据库和表的布局以及特性的信息.[描述表可以存储什么样的数据,数据如何分解,各部分信息如何命名等等,可以用来描述数据库中特定的表以及整个数据库(和其中表的关系)] ...
- Android Notivation的使用
官方帮助文档:http://wear.techbrood.com/guide/topics/ui/notifiers/notifications.html 博文推荐:http://blog.csdn. ...
- 学习wxpython的网站
http://xoomer.virgilio.it/infinity77/Phoenix/main.html https://wxpython.org/Phoenix/docs/html/main.h ...
- oracle日期函数集锦
oracle 中select TO_CHAR(sysdate,'Mon') from dual; Question:出来是中文的“6月” 我想要英文的怎么办? Answer:select to_cha ...
- jquery ajax调用
client: <script type="text/javascript" language="javascript"> function jqu ...
- BZOJ 1087 互不侵犯king
Description 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. Input 只有一行,包 ...