html中的form表单以及相关控件input、文本域、下拉select等等的详细解释，点赞加关注持续更新~

news2024/9/29 23:38:02

文章目录

- 表单
- - 创建表单form
  - input 标签
  - input标签的value属性
  - 设置input标签格式
  - 单选框
  - 多选框
  - 上传文件
  - 下拉菜单
  - 文本域
  - 设置文本域格式
  - label 标签
  - 按钮

表单

作用：收集用户信息。

使用场景：

登录页面
注册页面
搜索区域

创建表单form

 <form action="./target.html">
 </form>

action属性：指向服务器地址

input 标签

input 标签 type 属性值不同，则功能不同。

<input type="..." >

在这里插入图片描述

当input的属性type="text/password"时的属性补充

autocomplete="off" 关闭自动补全

readonly 设置为只读，不能修改

disabled 设置为禁用

autofocus 自动获取焦点

placeholder 提示内容

maxlength=“数字” 最长字符

input标签的value属性

input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的

当 type 的取值为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本

当 type 的取值为 text、password、hidden 中的其中一个时，此时 value 属性的值表示的是输入框中显示的初始值，此初始值可以更改，并且在提交表单时，value 属性的值会发送给服务器（既是初始值，也是提交给服务器的值）

当 type 的取值为 checkbox、radio 中的其中一个时，此时 value 属性的值表示的是提交给服务器的值

type="checkbox"时，其 value 属性的值与单选框、复选框是否勾选有关。呈勾选状态时提交给服务器的数据值为true，否则为false，默认值为 false。
当 type 的取值为 image 时，不能使用value属性，点击它提交表单后，会将用户的点击位置相对于图像左上角的 x 坐标和 y 坐标提交给服务器
type="image" 定义图像形式的提交按钮，可以通过调整input的width和height来改变图片的大小。必须把 src 属性和 alt 属性 <input type="image"> 结合使用（alt 属性表示图片未正常显示时，用于替换图片的提示；如果不写这个属性，当图片未正常显示时，会默认显示提交这两个字）
<input type="text"  placeholder="请输入">
<input type="image"  src="./d.jpeg" title="submit"  alt="提交" >

设置input标签格式

input 标签占位文本

占位文本：提示信息，文本框和密码框都可以使用。

<input type="..." placeholder="提示信息">

修改input输入框提示文字的样式

input::placeholder {
  font-size: 5px;
  color: rgb(190, 190, 190);
}

去除input获取焦点时的边框

 outline: none;

修改input输入框提示文字

input{
text-indent: 5px; /*提示文字距离左边框的距离*/
font-size: 12px; /*提示文字大小*/
}

单选框

常用属性
在这里插入图片描述

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

在这里插入图片描述

提示：name 属性值自定义。

多选框

多选框也叫复选框，默认选中：checked。

<input type="checkbox" checked> 我爱敲代码

上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

<input type="file">  <!--上传单个文件-->
<input type="file" multiple>  <!--上传多个文件-->

下拉菜单

在这里插入图片描述

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
 <option selected>武汉</option>
</select>

value 属性是 <option> 元素的属性，它指定了当选项被选中时发送到服务器的值。

在这个例子中，如果用户选择“苹果”，value 的值就会是 “apple”。

<select name="fruits">  
  <option value="apple">苹果</option>  
  <option value="banana">香蕉</option>  
  <option value="cherry">樱桃</option>  
</select>

默认显示第一项，selected 属性实现默认选中功能。

文本域

作用：多行输入文本的表单控件。

在这里插入图片描述

<textarea>文本域默认初始文字</textarea>

设置文本域格式

设置输入文字格式

textarea{
    resize: none;  /* 禁用文本域大小的缩放 */
    width: 200px;  /*设置文本域宽度*/
    height: 50px;  /*设置文本域高度*/
    color: red;  /*输入文字的颜色*/
    font-size: 15px;  /*输入文字的大小*/
    outline: none;  /*去除获得焦点时出现的边框*/
    border: none;  /*去除文本域默认边框*/
 }

设置提示文字格式（与修改input提示文字格式的方法基本相同）

textarea::placeholder {
  font-size: 25px; /*设置提示文字的大小，如果没有设置提示文字的大小，默认提示文字的大小和输入文字的大小相同*/
  color:green;  /*设置提示文字的颜色*/
  text-indent: 20px; /*提示文字距离左边框的距离*/
}

在这里插入图片描述

注意点：实际开发中，使用 CSS 设置文本域的尺寸，且一般禁用右下角的拖拽功能

label 标签

作用：网页中，某个标签的说明文本。

在这里插入图片描述

经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

在这里插入图片描述

写法一
- label 标签只包裹内容，不包裹表单控件
- 设置 label 标签的 for 属性值和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man">男</label>

写法二：使用 label 标签包裹文字和表单控件，不需要属性

<label><input type="radio"> 女</label>

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮

<button type="">按钮</button>

在这里插入图片描述

<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
  用户名：<input type="text">
  <br><br>
  密码：<input type="password">
  <br><br>

  <!-- 如果省略 type 属性，默认值为submit，功能是提交 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>