【HTML】 八、表单设计

HTML标记语言

一、HTML的语法
二、html的基本结构
三、文档设置标记
四、图像标记
五、超链接的使用
六、表格
七、HTML框架
八、表单设计

八、表单设计

1. 表单标记

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

(1) 基本格式

<form action="服务器端地址(接受表单内容的地址)" name="表单名称"method="post|get">...</form>

(2) 常用属性

I. name
表单名称
II. method
传送数据的方式,分为post和get两种方式
i) get方式
get方式提交时,会将表单的内容附加在URL地址的后面,所以限制了提交的内容的长度,不超过8192个字符,且不具备保密性
ii) post方式
post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理,没有数据大小限制
III. action
表单数据的处理程序的URL地址,如果为空则使用当前文档的URL地址,如果表单中不需要使用action属性也要指定其属性为”no“
IV. enctype
设置表单的资料的编码方式
V. target
和超链接的属于类似,用来指定目标窗口

2. 文本域和密码

<input>标记

<input>标记没有结束标记

(1) 基本语法

<input type="" name="" value="" size="" maxlength="">

(2) 属性介绍

I. type属性
type属性有两个值

  • text 当type="text"时,<input>表示一个文本输入域
  • password 当type="password"时,<input>表示一个密码输入域
    II. name属性
    定义控件的名称
    III. value属性
    初始化值,打开浏览器时,文本框中的内容
    IV. size属性
    设置控件的长度
    V. maxlength属性
    输入框中最大允许输入的字符数

3. 提交、重置、普通按钮

1) 提交按钮
<input type="submit">时,为提交按钮
2) 重置按钮
<input type="reset">时,为重置按钮
3) 普通按钮
<input type="button">时,为普通按钮

4. 单选框和复选框

1) 单选按钮
<input type="radio">时,为单选按钮
2) 复选框
<input type="checkbox">时,为复选框
3) 注意⚠️
单选框和复选框都可以使用”cheked“属性来设置默认选中项

5. 隐藏域

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

6. 多行文本域

用法 使用<textarea>标记可以实现一个,能够输入多行文本的区域
语法格式
<textarea name="name" rows="value" cols="value" value="value"> ... ... <textarea>
rows属性和cols属性分别用来指定,显示的行数和列数,单位是字符个数

7. 菜单下拉列表域

<select>标记

(1) 语法格式

                <select name="" size="value" multiple>
                <option value="value" selected>选项1</option>
                     
                <option value="value">选项3</option>
                ... ... ...
                </select>

(2) 属性

I. multiple属性

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

II. size属性 设置列表的高度
III. name属性 定义这个列表的名称

(3) option标记

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

  • value 给选项赋值,指定传送到服务器上面的值
  • selected 指定默认的选项
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这个序可能会有些长 先作个自我介绍,我是一名交互设计师,90后。我并不怎么喜欢编辑文章或写点什么,就是因为懒,所以...
    IxDKN阅读 11,142评论 16 160
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,119评论 0 0
  • 表单表单是用来提交资料、意见,规范流程执行过程的格式。在网页中主要负责数据采集功能。表单标签:这里面包含了处理表单...
    思思有礼阅读 865评论 0 0
  • 一、表单 表单元素为,表单中可以包含多项表单元素(又称输入域),表单元素之间不能进行嵌套。为了将信息正确提交到服...
    菁华浮英梦阅读 607评论 0 28
  • 什么是FORM表单: 表单是用来提交资料、意见,规范流程执行过程的格式。表单在网页中主要负责数据采集功能。一个表单...
    PYFang阅读 1,168评论 0 0