美文网首页前端开发
【HTML】 八、表单设计

【HTML】 八、表单设计

作者: 子午禾苇 | 来源:发表于2019-02-24 20:22 被阅读90次

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 指定默认的选项

相关文章

  • 【HTML】 八、表单设计

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

  • 第一个Django App(四)

    设计简单表单 form 更新/polls/templates/polls/detail.html,包含一个HTML...

  • HTML表单设计

    1. 表单标记 ... 。表单提交时的内容就是 表单中的内容。 基本格式 ... 常用属性name (表单名称)...

  • HTML表单的简单用法

    HTML表单的简单用法:HTML表单用于搜集不同类型的用户输入。 元素定义HTML表单。HTML表单包含表单元素。...

  • 简单介绍 HTML 表单的用法

    HTML 表单用于收集用户输入, 元素定义 HTML 表单。HTML 表单包含表单元素,表单元素指的是不同类型的...

  • HTML表单的用法

    html表单用于搜集不同类型的用户输入。

    元素 form元素定义html表单 HTML 表单包含表单元...

  • HTML学习笔记(四)

    一:HTML 表单 HTML 表单用于搜集不同类型的用户输入。 元素 HTML 表单用于收集用户输入。 HTML ...

  • HTML 表单的用法

    HTML 表单用于搜集不同类型的用户输入 元素定义 HTML 表单: 所有属性如下 HTML 表单包含表单元素表...

  • 08-表单

    本节案例 表单的作用 HTML 表单用于收集用户输入。 表单form 元素定义 HTML 表单,里面需要有各种表单...

  • Django学习-第十三讲(下):表单(一)forms.form

    1. html表单和django中的表单的区别 HTML中的表单: 单纯从前端的html来说,表单是用来提交数据给...

网友评论

    本文标题:【HTML】 八、表单设计

    本文链接:https://www.haomeiwen.com/subject/ebgbyqtx.html