笔记 - 8、HTML - 表单

简介: HTML·表单:在html中,表单常用来提交用户在页面中输入的数据。(******) 代码:在html中使用表单,需要用到<form></form> 标记 form必不可少的属性:     action:该表单提交到的一个地址(程序)。后台做的,前端仅作了解。     method:表单的提交方式:         delete: 不做了解。      
HTML·表单:在html中,表单常用来提交用户在页面中输入的数据。(******)

代码:在html中使用表单,需要用到<form></form> 标记
form必不可少的属性:
    action:该表单提交到的一个地址(程序)。后台做的,前端仅作了解。
    method:表单的提交方式:
        delete: 不做了解。
        put:不做了解。
        get:使用get方式提交数据,表单中的数据会直接显示在浏览器的地址栏处,这回导致信息安全隐患。一般表单不会用get方式提交数据。
        post:表单中的数据被包含在表单的主体中,不会直接显示在浏览器地址栏中,信息相对安全,然后被送到处理程序上。

form的其他属性:
    name:表单的名称,不是表单的必要属性,但是为了防止表单提交到后台处理程序时出现换乱,一般给表单命名(添加name属性)。
    enctype:表单的编码方式
        application/x-www-form-urlencoded:默认的编码方式。
        multipart/form-data:MIME编码,上传文件表单必须将enctype属性值设置为它。
    target:目标显示方式
        与超链接的target属性作用相同。

=======    表单对象(输入框之类的元素)=========
网页中的表单有许多不同的表单元素组成。这些元素包括文字字段,单选按钮,复选框,菜单和列表以及按钮等。

1.文字字段text(一个普通的单行文本输入框)(************)
    <input type="text" />
    属性:
        type:用来指定该元素是那种表单元素。
        name:文字字段的名称,用于和页面中其他控件加以区别,不能为中文,并且有大小写之分。做后台必不可少的一个属性,没有该属性,那么后台将取不到该元素的值。
        value:用来定义文本框的默认值。
        size:用来设置文本框显示长度。
        maxlength:用来设置文本框中最多可以输入多少个字符。
2.密码域(password,就是一个密码输入框):(************)
    <input type="password" />
    密码输入框中输入的内容,将全部被小圆点覆盖,看不到原来,但实际还是原来的内容,只是被一些小圆点覆盖,并不是输入了一串小圆点。
    除了type属性,其他属性与文本输入框的属性相同。

3.单选按钮:(radio,通常用来做性别选择),一组单选按钮只能有一个被选择。
    <input type="radio" />(************)
    注意:
        1、一组单选框中,每个单选框的name属性值必须一样,否则将不能组成一组单选框,有可能所有的单选按钮都能被选中,这是不正确的。
        2、每个单选按钮必须设置value属性的值,否则数据传输到后台将是空值。
4.多选(checkbox,复选框):
    <input type="checkbox" />(************)
    注意:
        1、一组复选中,每个name属性的值也必须一样,否则将不是同一组复选框,
        2、同样,每个复选框都必须设置value属性的值,同单选框。

5.提交按钮(submit<允许,提交的意思>)
    一个表单,填写数据后,要进行提交,比如网页常见登录按钮,注册按钮等。作用是将整个表单中填写好的数据进行提交,到后台处理。
    <input type="submit" />(************)

按钮的属性:
    type:设置按钮的类型
        button:普通按钮,点击不会提交表单。
        submit:提交按钮,点击之后会将表单中数据提交。
        image:图片按钮,作用与提交按钮一样,也是用来提交表单的数据。
        reset:重置按钮,作用是点击后,将会清空该按钮所在表单中所有已填写好的数据。
    value:用来设置显示在按钮上的文字。
        submit按钮:默认显示:提交查询内容
        button按钮:默认没有任何文字
        image按钮:没有文字。
        reset:默认是重置。

    image:注意!!!
        图片按钮必须设置src属性引入图片,否则按钮上将没有图片。

6.隐藏域(hidden),不会显示在页面中,是隐藏的,通常是用来保存一些特定的数据。
    <input type="hidden" name="" value=""/>(***)

7.文件域(file,上传文件用的)
    <input type="file" name="" />(****)
    上传文件时:name属性是必须有的,否则文件将不可能上传成功!
8.菜单和列表(选择下拉框),通常用在选择省市的时候。
    <select>(************)
        <opiotn value="1">选项一</option>
        <opiotn value="2">选项二</option>
        <opiotn value="3">选项三</option>
    </select>
    写法,必须在<select></select>中嵌套<option></option>标签。
    <option>标签必须要有value属性。
9.多行文本域(textarea):(************)
    <textarea></textarea>
    通常要求浏览者输入多行文本时,就要使用多行文本域,而不是文字字段(单行文本域),要注意多行文本域不是用input标记,而是用一对<textarea>标记多行文本域。
    与单行文本域的区别是,单行文本域中的内容是写在input标记的value属性值中的,而多行文本域中的内容直接写在<textarea></textarea>这一对标签之间。

    属性:
        cols:表示该多行文本域初始的列数,这个列是按照一个字符来算的,一个字符占一列。
        rows:表示该多行文本域初始的行数,这个行也是按照一个字符来算的。
    cols和rows相当于是用width和height属性设置了高度和宽度。
    高版本的浏览器可以通过文本域右下角的三角形来拖动改变文本域的大小。


id属性:
    主要用来标记一个唯一的元素,这个元素可以是任意元素,就是同一个页面,id的值不能重复出现第二次,这是不符合规则的。
    就好比身份证号,每个人的身份证号不可能一样。
    写法与其它属性写法相同
    <input type="text" id="username">
    <table id="table"></table>
    ......
    CSS的时候再讲。

目录
相关文章
|
2天前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
2天前
|
移动开发 前端开发 JavaScript
HTML 表单和输入详解
HTML 表单是收集用户输入的关键组件,包括多种输入控件如文本框、单选框、复选框、下拉列表等。表单由 `&lt;form&gt;` 标签定义,常用属性有 `action` 和 `method`。输入控件如 `&lt;input&gt;` 和 `&lt;select&gt;` 可实现不同类型的用户输入,而 `&lt;button&gt;` 用于提交表单。HTML5 还提供了表单验证功能,如 `required` 和 `pattern` 属性,确保输入的有效性。结合 JavaScript 可实现更复杂的表单逻辑。掌握表单是前端开发的基础技能之一。
|
1月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
24天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
33 4
|
30天前
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!
|
3月前
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
40 7
基于Spring3 MVC实现基于HTML form表单文件上传
|
3月前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
|
3月前
|
Python
HTML表单
【6月更文挑战第13天】HTML表单。
28 7
|
2月前
|
数据安全/隐私保护
HTML4(三):表单
HTML4(三):表单
20 0
|
2月前
|
开发者
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
28 0