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

表单

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

表单标签 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一般用于需要输入大量文本的位置上

<textarea> cols属性 cols=”10” 表示宽度，一行最多输入一个汉字即两个字符 rows属性 rows=”3” 表示高度行数 textarea{ resize:none;} 禁止调整多行文本域的大小 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个页面</title> <link rel="stylesheet" href="./index.css"> </head> <body> <form action="https://www.baidu.com" method="get" name="表单名称"> <textarea placeholder="请输入" name="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 属性用于下拉列表的默认选中

相关数据

颢维名字寓意及含义

#高级鬼魂术#

应用程序-2.创建子线程（C语言实现）

友情链接