文档章节

《Head first HTML与CSS 第二版》读书笔记 第十四章 表单

一万
 一万
发布于 2016/08/07 21:14
字数 883
阅读 11
收藏 1

使用<form>元素创建表单。几乎所有块元素都可以放在<form>元素中。

form的action属性包含web服务的URL告诉浏览器表单提交到的地址。method属性指定提交的方法。

input元素时一个void元素,所以没有结束标签。

  • 一行文本输入框:<input type="text"> 可以使用maxlength属性限制用户最多能输入的字符数。
  • 提交按钮:<input type="submit" value=""> value属性是按钮显示的文字,默认是Submit或Submit Query。
  • 单选按钮:<input type="radio" name="" value="">每组相关联的单选按钮必须有相同的name。可以有不同的值。checked是布尔属性,为真是浏览器显示表单时默认选中。
  • 复选框:<input type="checkbox" name="" value="">name和value的规则与radio相同。也可以使用checked布尔属性。
  • 文本区:<textarea name="" rows="" cols=""></textarea>可输入多行文本,如果文本在文本区内放不下右侧有出现滚动条。textarea不是void元素,所以它有结束标记。使用rows和cols属性指定文本区高度和宽度分别是多少字符。开始和结束标记之间的所有文本会成为浏览器文本区中的初始文本。
  • 菜单:<select>元素与嵌套在其中的<option>元素结合使用可以创建一个菜单。<option>元素表示一个菜单项。<option>元素的内容作为菜单项的描述,value属性作为每个菜单项的值。
    <select name="">
      <option value=""></option>
      <option value=""></option>
      <option value=""></option>
    </select>

         

以下是HTML5中新加入的:

  • 数字输入:<input type="number" min="0" max="20">使用max和min来限制允许输入的范围。
  • 范围输入:<input type="range" min="" max="" step="">类似于number,只是会显示一个滚动条和一个输入框。step属性用来指定步长。
  • 颜色输入:<input type="color">单击控件会弹出一个颜色选择器。
  • 日期输入:<input type="date">
  • email输入:<input type="email"> 电话号码输入:<input type="tel"> url输入:<input type="url">这三种<input>都是text类型的表中。在桌面浏览器上,看不出任何差别,在移动浏览器上会得到定制键盘,可以更容易输入需要的字符。

对于text <input>和<textarea>浏览器有限制可以输入的文本字符数,但是通常不会输入这么多,完全可以忽略。对于<textarea>没有办法限制用户可以键入多少文本。

对于复选框,提交表单时会把所有复选框的值合并为一个值。例如:spice=salt&pepper&garlic。

<input>是一个内联元素。

伪类first-child选中第一个子元素。

 

用<label>元素标记表单中的标签(文本提示),可以提供页面结构更多的信息,对于有视力障碍的人有助于使用屏幕阅读器。

 

fieldset和legend将元素组织在一起:

<fieldset>
  <legend>Condiments</legend>
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</fieldset>

密码输入:<input type="password">

文件输入:<input type='file">

多选菜单:在<select>元素中添加multiple布尔属性,可以将菜单变为多选菜单。

 

placeholder属性在大多数<input>元素中都可以使用,在未输入时显示提示信息。

required布尔属性为真时单击提交按钮时浏览器将检查该控件是否有值,如果没输入将不提交并提示。

© 著作权归作者所有

一万
粉丝 30
博文 102
码字总数 173386
作品 0
朝阳
程序员
私信 提问
knockout2.0系列教程汇总

本文档对knockout2.x的基本使用方法做了讲解,虽然不是十分全面,但也几乎涵盖了knockout2.x的知识(除了高级用法、自定义绑定) 高级应用 分享到:

zuolz1985
2013/05/11
0
0
【原创】《深入剖析Tomcat》读书笔记

第一章 一个简单的Web服务器 第二章 一个简单的servlet容器 第三章 连接器 第四章 Tomcat的默认连接器 第五章 servlet容器 第六章 生命周期 第七章 日志记录器 第八章 载入器 第九章 Sessio...

pandudu
2015/12/22
46
0
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

产品哥
2011/12/02
416
1
《Head first HTML与CSS 第二版》读书笔记 第七章 CSS入门

CSS由规则组成,每个规则为选择的HTML元素提供样式。 典型的规则包括一个选择器以及一个或多个属性和值。 选择器指定 规则将应用到哪些元素。 每个属性声明以一个分号结束。 规则中所有属性和...

一万
2016/07/31
56
0
《VC++技术内幕》读后感

看的是第四版的电子书,毕竟又厚又贵,买书不划算,而且这版翻译的也很好,记录下我的一点读书心得。 第一章:对windows的消息处理模式,GDI,DLL等有个基本了解,价值不大,算入门级别吧。 ...

嗯哼9925
2017/12/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
35分钟前
5
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
今天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
今天
5
0
轻量级 HTTP(s) 代理 TinyProxy

CentOS 下安装 TinyProxy yum install -y tinyproxy 启动、停止、重启 # 启动service tinyproxy start# 停止service tinyproxy stop# 重启service tinyproxy restart 相关配置 默认...

Anoyi
今天
2
0
Linux创建yum仓库

第一步、搞定自己的光盘 #创建文件夹 mkdir -p /media/cdrom #挂载光盘 mount /dev/cdrom /media/cdrom #编辑配置文件使其永久生效 vim /etc/fstab 第二步,编辑yun源 vim /ect yum.repos.d...

究极小怪兽zzz
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部