学习HTML5一周的收获3

[form]

1、两个属性

action:表单提交的服务器地址

method:数据使用的方法.get/post

>>>get和post的区别

get传参数使用URL传递,所有参数可见,不安全;get传参数量数据有限;

post传参数使用http请求传递,较安全,post可传大量数据

但是前者传递的速率大于后者

>>>URL传参数的形式,链接URL地址?name1=value1&name2=value2

2、input的常用属性

type:设置input的输入类型

name:给input输入框起名,一般情况下,name属性必不可少,因为,传递

数据时,使用name=value(输入内容)的形式传递

value:input输入框的默认值

placeholder:输入框的提示内容,当input有默认的value或者输入值时,

placeholder消失

3、input-type属性的常用属性值

text:文本输入框

password;密码输入框,输入内容默认显示小黑点

radio:单选框

使用时,value属性必填,提交时,提交为value中的默认值

radio/checkBox凭借name属性,确定是否同一组,name 相同为同组,只能选一个

使用checked="checked"属性,设置默认中选项

file:文件上传

使用accept="类型",设置只能上传的文件类型,image/*任意格式图片

submit:提交按钮,将所有表单内容提交给后台服务器

reset:重置表单数据,将表单数据恢复到默认状态

image:图形提交按钮。跟submit一样,具有表单提交功能。

使用src属性,选择图片路径

button:普通按钮,没用

4、属性名等于属性值的情况

checked="checked" 设置radio或checkBox的默认选中项

multiple="multiple" 设置select控件为多选

selected="selected":设置select控件,默认选中的option选项

readonly="readonly" 设置为只读模式,不允许编辑。

5、【下拉选择控件 select】

① 写法:<select>

<option></option> //可以有N多个

</select>

② name属性,应该写在<select>上,所有选项只有一个name

③ multiple="multiple" 设置select控件为多选,可在界面使用Ctrl+鼠标,进行多选。一般不用。

④ option常用属性:

value="":当option没有value属性时,往后台传递的是<option></option>标签中的文字;

当option有value属性时,往后台传递的是value属性的值。

title="":鼠标指上后显示的文字。

selected="selected":默认选中。

⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组,label属性表示分组名。

6、 【文本域 textarea】

① 写法:<textarea></textarea>

② 设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性,但不常用

③ readonly="readonly" 设置为只读模式,不允许编辑。

④ style="resize: none;" 设置为宽高不允许修改。

⑤ style="overflow: ;" 设置当文字超出区域时,如何处理。

>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。

>>> 常用属性值:hidden 超出区域的文字,隐藏无法显示

scroll 无论文字多少,均会显示滚动

auto 自动,根据文字多少自动决定是否显示滚动条(默认样式)

7、表格的边框与标题

<fieldset>表格的边框

<legend>联系方式</legend>表格的标题

。。。N多个表单元素(input/select/textarea)

</fieldset>

HTML5智能表单

H5新增input的form属性,用于指向特定form菜单的ID,实现input无需放在form标签中

,即可将表单进行提交

<form id="form1">

...

<input form="form1">

③ 新增input的属性:

Autocomplete:自动完成功能 根据之前输入过的内容在下次输入时根据以前的内容提示自动完成,

有两个属性值

许多浏览器自动开启

有两个属性值 off on

可以在<form>标签上设置Autocomplete,控制整张表单的自动完成开关,但是可以在个别input上单独设置,覆盖form的整体设置

Autofocus:自动获得焦点 autofocus="autofocus"

Form:所属表单

Required:必填 required="required"设置input必填

Pattern:验证input的模式

Placeholder:提示

时间: 2024-12-28 13:45:11

学习HTML5一周的收获3的相关文章

学习HTML5一周的收获1

HTML5的基本结构 学习了title标签(显示网站名称),link标签(链接文件,可做网页美化) 快捷键:Ctrl+/ 注释 学习[meta标签] 1.charset属性:单独使用,设置文档字符集编码格式. >>>写法:<meta charset="UTF-8"> >>>常见的中文编码格式: GB-2312:国标码,简体中文 GBK:扩展的国际码,简体中文 UTF-8:万国码Unicode码,基本兼容各国语言 2.http-equiv属

学习HTML5一周的收获2

超链接 a 1.herf:超链接的网络地址,可写本地文件的相对路径,或本地html文件的相对路径, 方式是img的src的路径 2.target:设置超链接打开窗口的位置,_slef 自身网页打开(默认) _blank 新页面开 3.title:鼠标指上弹出 [功能性链接] mailto://[email protected] tencent://massage/?uin=2831705549 [锚链接] 1.本页面锚链接 设置一个锚点:<a name="top"><

学习HTML5一周的收获4

/* [CSS常用文本属性] * 1.字体.字号: font-weight:字体的粗细,可选属性值:bold加粗  lighter细体  100~900数值(400正常,700 bold) font-size:字体大小   **PX  **%(浏览器默认字体大小的百分比,绝大部分默认16px) font-family:字体族,设置字体. >>>多个字体样式间用逗号分隔,浏览器解析时,会从左往右依次解析,选择可用字体. >>>一般前面使用具体字体名称,最后一个使用字体族类

PHP语言学习之html5的学习,一周总结

通过这周的html5的学习我整理了一下一些东西和一些总结 写代码的时候也开头都要对齐这样开起来很舒服,这些都是用到缩进键搞定的,比如<html></html>在一块写,要前后对齐,这样容易发现错误,而且看起来比较清晰 写代码是还有英文和中文的标点符号的问题,这些都要是注意的,(这基本是我在学习的时候遇到的问题) 要掌握好重要的标签,这样能够更好的学习.... 开始学习html 5 什么是html5HTML是由W3C的维护的 HTML是大小写不敏感的,HTML与html是一样的 HT

大熊君学习html5系列之------Online &amp;&amp; Offline(在线状态检测)

一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, online,offline 事件用来监测浏览器处于在线或离线状态.HTML5提出的离线存储,web应用程序可以在不连接互联网的情况下满足用户的部分需求,

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开

学习HTML5之类的前端技术的好方法!

今天学习HTML5,把网上的部分知识点复制到记事本里时,忽然醒悟,干嘛不把记事本改成HTML呢,还能随手进行新知识新操作的实践! 虽然比起针对知识点去实践有点麻烦,但是这样学习的时候,复习到了很多几乎快要忘记的东西,比如&.<.>.空格的转义字符,一下子熟练了很多2333 而且还有个好处,能练习各种文章格式的排版,对于有点强迫症似的我来说,直接复制粘贴一大段话到一个p标签里,我是绝对无法容忍的!哈哈!

大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)

一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, 今天主要讲的是对昨天文章中的代码进行重构,并且相应的美化了一下前台UI界面,如下图所示的效果: 哈哈哈酷吧!继续让咱们做个简单的回顾: 为了提高Web页面的响应速度,越

提要求,学习html5,完善自己的个人网站,体会不一样的现实心情

2016年6月5日,我睡不着,在这里,思考,思考自己的人生,也总结自己在这两年来的所有的成就,转眼22岁了,从自己当时选择从学校出来,到现在.我的整个人生啊,发生了翻天覆地的变化. 从学校当时的初心,到2016年5月29日,被现实磨到与女朋友分手,而分手的最后,什么也没有留下,就留下了一些自己的不成熟,眼看着所有的一切,都全完了.一切什么都没有了,当时自己的计划, 定了的时候,自己许下诺言的时候,自己打算开始认真追求,认真去开始自己的长跑路线的时候,而现时给自己留下的,只有自己内心的崩溃.唯独美