9、HTML表单设计（主要内容<form><input><select>标记）

表单标记

<form></form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单中的内容

基本格式

常用属性

1.name

表单名称

2.method

传送数据的方式，分为post和get两种方式

1)get方式

　　get方式提交时，会将表单的内容附加在URL地址的后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性

2)post方式

　　post方式提交时，将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制

3.action

　　表单数据的处理程序的URL地址，如果为空则使用当前文档的URL地址，如果表单中不需要使用action属性也要指定其属性为”no“

4.enctype

　　设置表单的资料的编码方式

5.target

　　和超链接的属于类似，用来指定目标窗口

文本域和密码

<input>标记

<input>标记没有结束标记

基本语法

属性介绍

1.type属性

type属性有两个值

1)text

当type="text"时，<input>表示一个文本输入域

2)password

当type="password"时，<input>表示一个密码输入域

2.name属性

定义控件的名称

3.value属性

　　初始化值，打开浏览器时，文本框中的内容

4.size属性

设置控件的长度

5.maxlength属性

输入框中最大允许输入的字符数

提交、重置、普通按钮

1.提交按钮

当<input type="submit">时，为提交按钮

2.重置按钮

当<input type="reset">时，为重置按钮

3.普通按钮

当<input type="button">时，为普通按钮

单选框和复选框

1.单选按钮

当<input type="radio">时，为单选按钮

2.复选框

当<input type="checkbox">时，为复选框

3.注意

单选框和复选框都可以使用”cheked“属性来设置默认选中项

隐藏域

当<input type="hidden">时，为隐藏表单域

多行文本域

使用<textarea>标记可以实现一个，能够输入多行文本的区域

语法格式

属性

rows属性和cols属性分别用来指定，显示的行数和列数，单位是字符个数

菜单下拉列表域

<select>标记

语法格式

... ... ...

</select>

属性

1.multiple属性

multiple属性不用赋值，其作用是，表示用可以多选的下来列表，如果没有这个属性就只能单选

2.size属性

设置列表的高度

3.name属性

定义这个列表的名称

option标记

<option>标记用来指定列表中的一个选项，需要放在<select></select>之间

值

1.value

给选项赋值，指定传送到服务器上面的值

2.selected

指定默认的选项

10、综合实战-简单的企业网站首页（主要内容设计图的切图和网页的整体框架）

<html>

<head>

    <title>表单设计</title>

    <meta charset="utf-8">

</head>

<body>

<form>

    账号：<input type="text" name="zhanghao" value="" size="10" maxlength="5">

    <br>

    <br>

    密码：<input type="password" value="" name="mima" size="10">

    <br>

    <br>

    <input type="hidden" value="隐藏的内容" name="mihiddenma" size="10">

    爱好：<input type="checkbox" name="tiyu" checked="checked">体育<input type="checkbox" name="changge">唱歌

    <br>

    <br>

    性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女

    <br>

    <br>

    自我介绍：<br>

    <textarea cols="35" rows="10" name="ziwojieshao">

这里是自我介绍

</textarea>

    <br>

    <br>

    地址：

    <select name="dizhi">

        <option value="sichuan">四川</option>

        <option value="beijing">北京</option>

        <option value="shanghai">上海</option>

    </select>

    <br>

    <br>

    <input type="submit" value="提交">

    <input type="reset" value="重置">

    <input type="button" value="按钮">

</form>

</body>

</html>

图示

前端学习:html基础学习五的更多相关文章

vagrant的学习之基础学习
vagrant的学习之基础学习本文根据慕课网的视频教程练习,感谢慕课网! 慕课的参考文档地址:https://github.com/apanly/mooc/tree/master/vagrant ...
前端学习:html基础学习一
1.HTML的语法(主要内容HTML语法格式.文档注释.代码格式) HTML的特点 1.可以设置文本的格式,比如标题.字号.文本颜色.段落等等 2.可以创建列表(例如打开百度,我们可以看到这样的列表) ...
JsRender 前端渲染模板基础学习
JsRender前端渲染模板使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中:避免了在JS中通过“+”等手动分割.连接字符串的复杂过程:针对 ...
Android学习之基础知识五—Android常用的七大控件
一.TextView控件:在界面上显示一段文本信息先看XML代码和执行效果: 代码分析: 1.android:id属性,给当前控件定义了一个唯一的标识符 2.android:layo ...
Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础目标: 熟练掌握vue中表单的处理方式对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
Android学习之基础知识五—创建自定义控件
下面是控件和布局的继承关系: 从上面我们看到: 1.所有控件都是直接或间接继承View,所有的布局都是直接或间接继承ViewGroup 2.View是Android中最基本的UI组件,各种组件其实就是 ...
Java学习日记基础（五）——类、对象之this、静态变量(类变量)、静态方法(类方法)、四大特征
this 赵本山问奥尼尔:“我的爸爸的爸爸是谁?” 奥尼尔:“不知道” 赵本山:“你傻啊,是我爷爷” 奥尼尔回去问科比:“我的爸爸的爸爸是谁?” 科比:“不知道” 奥尼尔:”你傻啊,是赵本山的爷爷“ ...
大二暑假第六周总结--开始学习Hadoop基础（五）
简单学习数据仓库HIVE HIVE是一个构建于Hadoop顶端的数据仓库工具支持大规模数据存储,分析,具有良好的可扩展性某种程度上可以看做是用户编程接口,本身不存储和处理数据依赖分布式系统HDF ...

随机推荐

前端MVC Vue2学习总结（一）——MVC与vue2概要、模板、数据绑定与综合示例
一.前端MVC概要 1.1.库与框架的区别框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...
.net core系列之初识asp.net core
.net core已经发布了2.0版本,相对于1.0的有了很大的完善,最近准备在项目中尝试使用asp.net core,所以就进行了一些简单的研究. 初识asp.net core分为以下几个部分: 1 ...
Subscription wildcards(MQTT)
想查看英文原文的请点击原文网址.本文是paho中讲述订阅通配符的.还是那句话,水平有限,如有翻译不当之处,欢迎指正. 订阅通配符 MQTT信息包含一个主题来进行区分.MQTT服务器使用主题来确定哪 ...
以通配符（%）开始的like字符串，走索引
在对oracle的SQL优化过程中经常会遇到[like'%abc']破坏索引的问题,但是如果真有此类需求,该如何在不破坏索引的基础上进行查询呢. [sql] view plain copy sys@m ...
Android项目实战（三十六）：给背景加上阴影效果
圆角背景大家应该经常用: 一个drawable资源文件里面控制corner圆角和solid填充色 <shape xmlns:android="http://schemas.and ...
JavaScript中函数function fun(){}和 var fun=function(){}的区别
function fun(){} 和 var fun=function(){}的区别标题有点长···· 废话少说,其实他们的主要区别就是"函数声明的提前行为". var fun= ...
JMeter接口HTTP请求implementation不选java会报错解决方法
1.若不对c参数和d参数进行URL编码则需要选择implementation为java: 2.若想不设implementation值,则需进行c参数d参数URLEncoding import java ...
sqlserver 存储过程递归查询分组+hierarchyid重建会员关系
CREATE PROCEDURE [dbo].[GetGroupInfo] @s_code NVARCHAR() = --会员卡号 AS BEGIN declare @p int; --查询唯一性结果 ...
MySQL操作时间的函数集
求两个Timestamp之间的秒差值: select TIMESTAMPDIFF(SECOND,TIMESTAMP("2017-03-01 07:58:20"),timestamp ...
栈和队列数据结构的相互实现[LeetCode]
栈是先进后出,队列是先进后出,这里讨论一下两种数据结构之间的相互实现. 一.用两个栈实现队列我们用一个栈来实现队列的进队操作(栈A),用另一个栈来实现队列的出队操作(栈B). 1.入队列: 把元素放 ...

前端学习:html基础学习五