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

六卿

已于 2023-03-07 17:53:34 修改

阅读量662

点赞数 2

分类专栏： # 前端基础（html、css）文章标签：前端 javascript html form表单

于 2022-12-15 18:00:00 首次发布

本文链接：https://blog.csdn.net/qq_43291759/article/details/128325434

版权

前端基础（html、css）专栏收录该内容

16 篇文章 6 订阅

订阅专栏

表单

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

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

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

<form action="提交表单时向何处发送表单数据" method="get | post" name="表单名称">
     ...表单元素
</from>

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

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

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

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

https://www.baidu.com/

input表单域

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

    <input type="类型" name="提交时的名称" value="表单初始值"><br />
    <input type="text" name="username" placeholder="请输入账号"><br />
    <input type="password" name="password" placeholder="请输入密码"><br />
    radio 单选按钮<input type="radio" name="sex" checked>女
    <input type="radio" name="sex">男<br />
    checkbox 复选框<input type="checkbox" name="hob" checked>吃饭
    <input type="checkbox" name="hob">睡觉
    <input type="checkbox" name="hob">唱歌

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

    <input type="submit" value="提交"> <br />
    <input type="reset" value="重置"> <br />
    <input type="button" value="按钮"> <br />
    <button>按钮</button> 默认类型为submit<br />
    <button type="submit">提交</button><br />
    <button type="reset">重置</button><br />
    <button type="button">普通按钮</button>

完整代码：

<!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="表单名称">
    <input type="类型" name="提交时的名称" value="表单初始值"><br />
    <input type="text" name="username" placeholder="请输入账号"><br />
    <input type="password" name="password" placeholder="请输入密码"><br />
    radio 单选按钮<input type="radio" name="sex" checked>女
    <input type="radio" name="sex">男<br />
    checkbox 复选框<input type="checkbox" name="hob" checked>吃饭
    <input type="checkbox" name="hob">睡觉
    <input type="checkbox" name="hob">唱歌<br />

    <input type="submit" value="提交"> <br />
    <input type="reset" value="重置"> <br />
    <input type="button" value="按钮"> <br />
    <button>按钮</button> 默认类型为submit<br />
    <button type="submit">提交</button><br />
    <button type="reset">重置</button><br />
    <button type="button">普通按钮</button>
    </from>
</body>

</html>

页面展示：
在这里插入图片描述
上面红色箭头的是提交，会将当前表单所绑定的信息，都提交到action的值上也就是会生成一个这样的url

点重置的时候：会将所有已经输入或者进行改变的值变成一开始的初始值。

文件

<input type=”file”> 文件上传
需要在form添加enctype属性
enctype=”multipart/form-data”


<form action=”提交表单时向何处发送表单数据” method=”get | post” name=”表单名称”  enctype=”multipart/form-data”>
    <input type=”file”> 文件上传
</from>

图片形式的按钮

<input type=”image” src=”images/tables.jpg” alt=”pic”> 文件上传

图片可以设置宽高

<input type=”image” src=”images/tables.jpg” alt=”pic” width=”200px”>

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

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

<input type=”hidden” value=”值”>

select下拉列表

<select name=””>
     <option value=”html”  selected>html</option>
	<option value=”css”>css</option>
</select>

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

<!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="表单名称">
    <select name="select">
      <option value="html" selected>html</option>
      <option value="css">css</option>
    </select>

    <input type="submit" value="提交">
    <input type="reset" value="重置">
    </from>
</body>

</html>

在这里插入图片描述

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

<textarea cols=”10” rows=”3”><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"></textarea>
    <select name="select">
      <option value="html" selected>html</option>
      <option value="css">css</option>
    </select>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    </from>
</body>

</html>

在这里插入图片描述
label标签
表单标注–扩大点击范围，一般与单选按钮、复选按钮组合使用
显示方式

 <input type=”text” id=”eta”>
 <label for=”eta”>吃饭</label>

隐式方式：

<label><input type=”checkbox”>吃饭</label>

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

表单相关属性

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

<!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"></textarea>
    <select name="select">
      <option value="html" selected>html</option>
      <option value="css">css</option>
    </select>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    </from>
    <p>Name: <input type="text" name="fullname" maxlength="5" /></p>
    <p>Name2: <input type="text" name="fullname" size="5"></p>
    maxlength="5"则input输入框中只能够输入5个字符<br />
    size="5"，表示input输入框只显示5个可见的字符，但你可以输入'无数多字符内容'<br />
    即: size居性规定输入字段的宽度(此处即是Name2文本框只显示5个字符大小的宽度)<br />
    由于 size属性是一个可视化的设计属性，我们应使用 CSS 中的width来代替它css 语法: <input style="width:100px" />
</body>

</html>

在这里插入图片描述
maxlength="5"则input输入框中只能够输入5个字符

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

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

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