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 ...

随机推荐

从0引入 ASP.NET Identity Core
原文出自Rui Figueiredo的博客,原文链接<ASP.NET Identity Core From Scratch> 译者注:这篇博文发布时正值Asp.Net Core 1.1 时 ...
java什么叫线程安全？什么叫不安全？
就是线程同步的意思,就是当一个程序对一个线程安全的方法或者语句进行访问的时候,其他的不能再对他进行操作了,必须等到这次访问结束以后才能对这个线程安全的方法进行访问什么叫线程安全: 如果你的代码所在的 ...
for in,Object.keys()与for of的区别
for in 1.for in一般用于遍历对象的属性: 2.作用于数组的for in除了会遍历数组元素外,还会遍历自定义可枚举的属性,以及原型链上可枚举的属性:3.作用于数组的for in的遍历结果是 ...
CentOS ifconfig无IP地址解决办法
修改/etc/sysconfig/network-scripts/ifcfg-ens33 把 ONBOOT 改为 yes,重启后就会有ip,且物理机和虚拟机可以互相ping通了.
【java设计模式】【创建模式Creational Pattern】抽象工厂模式Abstract Factory Pattern
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAW0AAABvCAIAAACo3AbKAAALvUlEQVR4nO1dUa7cOA7U/c+zwJxkf4
Spring框架（四）AOP面向切面编程
一.前言在以前的项目中,很少去关注spring aop的具体实现与理论,只是简单了解了一下什么是aop具体怎么用,看到了一篇博文写得还不错,就转载来学习一下,博文地址:http://www.cnbl ...
JDK8.0新特性
连接转载地址:http://www.2cto.com/kf/201609/544044.html Eclipse: http://aiyiupload.oss-cn-beijing.aliyuncs. ...
websocket教程（一）非常有趣的理解websocket
一.websocket与http WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算) 首先HTTP有 1 ...
通过 kms 激活 office 2016
1.管理员模式打开cmd,并切换到office的安装路径注:office2016默认安装在C:\Program Files\Microsoft Office\Office16,激活其他office自 ...
Windows下使用OpenSSL生成自签证书
下载OpenSSLhttp://slproweb.com/products/Win32OpenSSL.html 生成证书生成crt证书CMD进入安装bin目录,执行命令:openssl req -x ...

前端学习:html基础学习五