Html之 表单

简介: Html之 表单

Html之 表单

1.表单标记

<form>...</form>
<form></form>定义表单的开始位置和结束位置,表单提交时的内容就是<form>表单中的内容
基本格式:<form action="服务器端地址(接受表单内容的地址)" name="表单名称" method="post|get">...</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    和超链接的属于类似,用来指定目标窗口

2.文本域和密码


<input>标记没有结束标记
基本语法   <input type="" name="" value="" size="" maxlength="">
1.type属性   1.text   当type="text"时,<input>表示一个文本输入域
                     2.password    当type="password"时,<input>表示一个密码输入域
2.name属性    定义控件的名称  
3.value属性   初始化值,打开浏览器时,文本框中的内容
4.size属性    设置控件的长度
5.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、菜单下拉列表域

1.语法格式
     <select name="" size="value" multiple>
     <option value="value" selected>选项1</option>
     <option value="value">选项2</option>
     <option value="value">选项3</option>
     ... ... ...
     </select>
2.属性
    1.multiple属性    multiple属性不用赋值,其作用是,表示用可以多选的下来列表,如果没有这个属性就只能单选
    2.size属性       设置列表的高度
    3.name属性     定义这个列表的名称
3.option标记
    <option>标记用来指定列表中的一个选项,需要放在<select></select>之间
    1.value   给选项赋值,指定传送到服务器上面的值
    2.selected    指定默认的选项
目录
相关文章
|
25天前
|
移动开发 JavaScript 前端开发
HTML5 表单属性详解
HTML5引入了多种新的表单属性,使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等,常用属性有`placeholder`、`required`等。表单元素如`&lt;form&gt;`可设置提交方法和目标URL,`&lt;button&gt;`及`&lt;input type=&quot;submit&quot;&gt;`用于提交。新元素`&lt;datalist&gt;`和`&lt;output&gt;`提供更多功能。HTML5还提供了内置表单验证机制,增强用户体验。
|
26天前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
|
16天前
全局变量
【10月更文挑战第1天】全局变量。
35 4
WK
|
19天前
|
Web App开发 存储 移动开发
HTML5新增了哪些表单元素
HTML5通过新增多种表单元素和属性,提升了用户体验与交互性。例如,`email`和`url`元素分别验证邮箱地址和网址格式;`number`和`range`便于输入数字及区间值;`date`等元素简化了日期时间的选择;`search`添加搜索图标,`color`提供颜色选择器;`datalist`结合`input`属性给予用户下拉列表选项;`keygen`用于生成密钥对以增强安全性;`output`则用于动态展示计算结果。这些改进共同提高了表单的功能性和易用性。
WK
16 2
WK
|
19天前
|
移动开发 UED HTML5
HTML5新增了哪些表单属性
HTML5新增的表单属性包括:autocomplete(启用或禁用自动完成建议)、autofocus(自动聚焦)、form(关联表单外的表单元素)、formaction等重写版本(自定义提交行为)、height/width(设置图像输入尺寸)、list(指定可选列表)、min/max/step(设置数值范围)、multiple(多选文件/选项)、pattern(正则表达式验证)、placeholder(占位符提示)和required(必填校验)。这些新功能显著提升了表单的灵活性和用户体验,使数据输入更加准确有效。
WK
16 1
|
11天前
|
数据采集 数据安全/隐私保护
html常见的表单元素有哪些,html表单元素有哪些?
html常见的表单元素有哪些,html表单元素有哪些?
8 0
|
1月前
|
移动开发 前端开发 JavaScript
HTML 表单和输入详解
HTML 表单是收集用户输入的关键组件,包括多种输入控件如文本框、单选框、复选框、下拉列表等。表单由 `&lt;form&gt;` 标签定义,常用属性有 `action` 和 `method`。输入控件如 `&lt;input&gt;` 和 `&lt;select&gt;` 可实现不同类型的用户输入,而 `&lt;button&gt;` 用于提交表单。HTML5 还提供了表单验证功能,如 `required` 和 `pattern` 属性,确保输入的有效性。结合 JavaScript 可实现更复杂的表单逻辑。掌握表单是前端开发的基础技能之一。
|
1月前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
2月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
2月前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
43 4