从零开始HTML(三 2016/9/20)
1.HTML表单
HTML 表单用于搜集不同类型的用户输入。<form> 元素,HTML 表单用于收集用户输入。<form> 元素
①<input> 元素,<input> 元素是最重要的表单元素。<input> 元素有很多形态,根据不同的 type 属性。
描述 | |
---|---|
text | 定义常规文本输入。 |
radio | 定义单选按钮输入(选择多个选择之一) |
submit | 定义提交按钮(提交表单) |
<input type="text"> 定义用于文本输入的单行输入字段:
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<input type="radio"> 定义单选按钮。单选按钮允许用户在有限数量的选项中选择其中之一:
<form>
<input type="radio" name="sex" value="male" checked>Male checked表示默认这个选项
<br>
<input type="radio" name="sex" value="female">Female
</form>
<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单处理程序在表单的 action 属性中指定:
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
② Action 属性
action 属性定义在提交表单时执行的动作,向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到 web 服务器上的网页。
定义了由action_page.php来处理表单。
<form action="action_page.php">
③ Method 属性
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):
<form action="action_page.php" method="GET">
或者
<form action="action_page.php" method="POST">
使用get:
如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。
当您使用 GET 时,表单数据在页面地址栏中是可见的,GET 最适合少量数据的提交。浏览器会设定容量限制。
使用post:
如果表单正在更新数据,或者包含敏感信息(例如密码)。
POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。
④ Name 属性
如果要正确地被提交,每个输入字段必须设置一个 name 属性。
下面例子只有lase name字段被提交
<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
⑤ 用 <fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>
2.表单元素
① <select> 元素(下拉列表),<select> 元素定义下拉列表,<option> 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。
能够通过添加 selected 属性来定义预定义选项。
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
② <textarea> 元素,<textarea> 元素定义多行输入字段(文本域):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
③<button> 元素,<button> 元素定义可点击的按钮:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
④ HTML5 <datalist> 元素,
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
通过 <datalist> 设置预定义值的 <input> 元素:
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
3.输入类型
① 输入类型:text
<input type="text"> 定义供文本输入的单行输入字段:
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
②输入类型:password,<input type="password"> 定义密码字段:
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
③输入类型:submit ,<input type="submit"> 定义提交表单数据至表单处理程序的按钮。表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序(form-handler):
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
还有复选框checkbox,按键button等类型。
4.输入属性
value定义了输入属性,详细见:http://www.w3school.com.cn/html/html_form_attributes.asp
到这儿HTML应该就全部结束了,接下来该看看CSS了~
从零开始HTML(三 2016/9/20)的更多相关文章
- Stack Overflow 2016年度 20个最佳Python问题(一)
Stack Overflow 2016年度 20个最佳Python问题(一) https://zhuanlan.zhihu.com/p/25020763
- 从零开始HTML(二 2016/9/20)
1.布局 ① 使用 <div> 元素的 HTML 布局,<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位. <!DOCTYPE html> ...
- 2016.6.20 计算机网络复习要点第三章之CSMA/CD协议
1.最早的以太网是将许多计算机都连接到一根总线上: (1)总线的特点是:当一台计算机发送数据时,总线上的所有计算机都检测到这个数据,这种就是广播通信方式: (2)为了实现在总线上的一对一通信,可以使每 ...
- 2016 - 1 - 20 runloop学习
一:Runloop基本知识 1.本质就是运行循环 2.基本作用: 2.1保证程序持续运行 2.2处理APP中的各种事件:触摸,定时器,selector... 2.3节省CPU资源,系统程序性能:它会让 ...
- Hyperledger Fabric 1.0 从零开始(三)——环境构建(内网/准离线)
有公网环境的服务器可以直接看 Hyperledger Fabric 1.0 从零开始(二)--环境构建(公网) ,本篇内容与上篇相似,只不过环境搭建需要在内网下,也就是网络被限制的情况下. 1:环境构 ...
- 【MySQL】锁——查看当前数据库锁请求的三种方法 20
MySQL提供了查看当前数据库锁请求的三种方法:1. show full processlist命令 观察state和info列 2. show engine innodb status\G ...
- Git从零开始(三)
一.远程仓库管理 1.将本地内容推送到远程库 先关联远程库,执行命令: git remote add origin https://github.com/Hollydan/gitstore.git ( ...
- Java从零开始学三十九(对象序列化)
一.序列化 将对象的状态存储到特定存储介质中的过程 对象序列化,就是把一个对象变为二进制的数据流的一种方法,通过对象序列化可以方便的实现对象的传输或存储. 序列化保存对象的“全景图”,构建对象的“ ...
- Java从零开始学三十八(JAVA IO- 重定向IO)
一.三个静态变量 java.lang.System提供了三个静态变量 System.in(默认键盘) System.out(默认显示器) System.err 二.重写向方法 System提供了三个重 ...
随机推荐
- jquery动态刷新select的值,后台传过来List<T>,前台解析后填充到select的option中
jquery动态刷新select的值:将后台传来的List<T>赋值到select下的option. 第一个select选择后出发该方法refreshMerchant(params),传递 ...
- BigPipe学习研究
BigPipe学习研究 from: http://www.searchtb.com/2011/04/an-introduction-to-bigpipe.html 1. 技术背景 FaceBook ...
- Python 实现粒子滤波
#转# -*- coding=utf-8 -*-# 直接运行代码可以看到跟踪效果# 红色的小点代表粒子位置# 蓝色的大点表示跟踪的结果# 白色的方框表示要跟踪的目标# 看懂下面两个函数即可from n ...
- UIBezierPath用法
前言 笔者在写本篇文章之前,也没有系统学习过贝塞尔曲线,只是曾经某一次的需求需要使用到,才临时百度看了一看而且使用最基本的功能.现在总算有时间停下来好好研究研究这个神奇而伟大的贝塞尔先生! 笔者在学习 ...
- iOS开发之音频口通信-通过方波来收发数据
之前做过的项目有需要通过音频口通信用方波来收发数据,由于这方面的资料比较少,下面就介绍下其原理,希望能给大家帮助. 一. 音频通信简介大家应该都知道支付宝声波支付和拉卡拉吧,它们都是利用手机的音频口( ...
- mysql数据库、表、字段、记录:增、删、改、查
/* 结构:数据库.表.字段.记录 操作:增删改查 */ -- 1.数据库:增删改查 create datebase if not exists jkxy; drop database if exis ...
- APP在iOS和Android的推送规则
因为iOS和Android不同的规则,下边将iOS和Android能接收到通知的详细情 形进行说明(前提:APP已经在设备上安装并登录过): iOS: APP未 ...
- iOS开发网络篇—简单介绍ASI框架的使用
iOS开发网络篇—简单介绍ASI框架的使用 说明:本文主要介绍网络编程中常用框架ASI的简单使用. 一.ASI简单介绍 ASI:全称是ASIHTTPRequest,外号“HTTP终结者”,功能十分强大 ...
- [Android Tips] 7. 以调试模式启动应用
adb shell am set-debug-app -w {package_name}
- electron开发(一)
0. 简介 http://electron.atom.io/ 官网 https://www.v2ex.com/t/277623 基于 Electron 的 Linux 下的网易云音乐 https: ...