2002年世界杯决赛_2018俄罗斯世界杯 - dzlpgs.com

前端基础(七)_表单的基本组成与使用

2025-05-13 03:35:23 女足世界杯美女 2502

表单

表单：用于采集不同类型的用户输入数据，发送给服务器，实现用户和服务器之间的数据交互；

表单标签 form 用于声明表单，定义数据的采集范围

注意：1、一个页面中可以有多个表单标签，但是标签之间是相互独立的，不能嵌套；2、 用户向服务器发送数据一次只能提交一个表单中的数据，如果提交多个需要使用JS中的异步交互方式来实现语法：

...表单元素

method属性：提交表单时所用的http方法；默认get方式

get方式:将数据作为URL地址的一部分发送给服务器；安全性低;有数据长度限制；请求的数据可以被缓存，能够保留在浏览器历史记录；作为书签被收藏；

例如：https://www.baidu.com/?username=123&psd=asdhttps://www.baidu.com/?参数名=参数值&参数名=参数值

post方式:将数据隐藏到http数据流中进行传输；安全性比get高；数据长度没有限制；请求数据不会被缓存，也不会在浏览器的历史记录被保存，更不会作为书签被收藏；

input表单域

placeholder提示信息，在你的value为空的时候他才会显示出来，但是他本身并不是value，也不会被表单提交




radio 单选按钮女

男

checkbox 复选框吃饭

睡觉

唱歌

checked 针对于单选和多选，有默认选中的效果，可以写checked或者checked=”checked” ，他们需要有一个相同的name属性。提交按钮




默认类型为submit



完整代码：

我的第一个页面




radio 单选按钮女

男

checkbox 复选框吃饭

睡觉

唱歌




默认类型为submit



页面展示：上面红色箭头的是提交，会将当前表单所绑定的信息，都提交到action的值上也就是会生成一个这样的url点重置的时候：会将所有已经输入或者进行改变的值变成一开始的初始值。

文件

文件上传

需要在form添加enctype属性

enctype=”multipart/form-data”

文件上传

图片形式的按钮

文件上传

图片可以设置宽高

注意：input必须与src属性和alt属性配合使用

隐藏域。对用户是不可见的， 目的是收集或发送信息到服务器，有利于程序处理信息

select下拉列表

Selected 属性 用于下拉列表的默认选中，可以直接携程selected或者Selected=”Selected”

我的第一个页面

多行文本域textarea一般用于需要输入大量文本的位置上

label标签表单标注–扩大点击范围，一般与单选按钮、复选按钮组合使用显示方式

隐式方式：

现在达到的效果就是点击吃饭也能选中这个input框。

表单相关属性

readonly属性：只读属性，不能修改，可以被提交disabled属性：禁止表单元素，被禁用的元素不可用，不可点击，不会提交maxlength属性：允许输入的最多的字符数

我的第一个页面

Name:

Name2:

maxlength="5"则input输入框中只能够输入5个字符

size="5"，表示input输入框只显示5个可见的字符，但你可以输入'无数多字符内容'

即: size居性规定输入字段的宽度(此处即是Name2文本框只显示5个字符大小的宽度)

由于 size属性是一个可视化的设计属性，我们应使用 CSS 中的width来代替它css 语法:

maxlength\="5"则input输入框中只能够输入5个字符

size\=“5”，表示input输入框只显示5个可见的字符，但你可以输入’无数多字符内容’

即: size居性规定输入字段的宽度(此处即是Name2文本框只显示5个字符大小的宽度)

由于 size属性是一个可视化的设计属性，我们应使用 CSS 中的width来代替它css 语法:

size属性：表单输入内容的可见长度，不影响输入，input框的长度value属性：初始值placeholder属性：文本域的提示信息checked属性：默认选择 用于单选按钮和复选框的默认选择selected 属性 用于下拉列表的默认选中