表单、input——css

_洋

已于 2022-04-15 19:30:29 修改

阅读量446

点赞数

分类专栏： HTML+CSS 文章标签： css3

于 2022-04-15 08:52:25 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/124184269

版权

HTML+CSS 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章目录

表单简介
表单属性
input

表单简介

表单:

在现实生活中表单用于提交数据
在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
使用form标签来创建一个表单

表单属性

form的属性

action表单要提交的服务器的地址

    <form action="1.HTML">  
    </form>

input

input是行内块元素

输入框

注意:数据要提交到服务器中，必须要为元素指定一个name属性。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <form action="1.HTML">
      <!-- 文本框 -->
      <!-- 数据提交到服务器上必须为元素指定name属性，这样服务器才方便处理数据 -->
      <!-- 向服务器传值的格式： name = value -->
      文本框：<input type="text" name="username" />

      <!-- 密码框 -->
      密码：<input type="password" name="password" />

      <!-- 单选按钮 —— 选择框-->
      <!-- 需要有相同的name属性将单选框绑定到一起 -->
      <!-- 需要指定value属性，方便向服务器传值，选中谁就将谁的value传过去 -->
      <!-- checked默认选中 -->
      单选框<input type="radio" name="hello" value="a" checked />
      <input type="radio" name="hello" value="b" />

      <!-- 多选框  —— 选择框-->
      <!-- 需要有相同的name属性将多选框绑定到一起 -->
      <!-- 需要指定value属性，方便向服务器传值，选中谁就将谁的value传过去 -->
      多选框<input type="checkbox" name="hello1" value="1" checked />
      <input type="checkbox" name="hello1" value="2" />
      <input type="checkbox" name="hello1" value="3" />
      <input type="checkbox" name="hello1" value="4" />

      <!-- 下拉列表 -->
      <!-- option表示每个下拉选项 -->
      <select name="select" id="">
        <option value="1">选项一</option>
        <option selected value="2">选项二</option>
        <option value="3">选项三</option>
      </select>

      <!-- 提交按钮 -->
      <!-- value表示提交按钮上显示的内容 -->
      <input type="submit" value="注册" />
    </form>
  </body>
</html>

点击提交按钮之后，向服务器传值：

file:///C:/Users/86198/VScode/HTML/1.HTML?username=1234&password=1234&hello=b&hello1=1&hello1=2&hello1=3&select=2

按钮

     <!-- 提交按钮 -->
      <!-- value表示提交按钮上显示的内容 -->
      <input type="submit" value="注册" />
       <!-- 重置按钮 -->
      <input type="reset">
       <!-- 普通按钮 -->
      <input type="button" value="按钮">
     
      <br>
      <br>

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按钮</button>

在这里插入图片描述
这两种写法的功能是完全一样的，只是一个是自结束标签，一个是成对的标签。

其他input标签

颜色选择框

  <input type="color">

邮件输入框

 <input type="email">

属性

autocomplete="off”关闭自动补全
readonly将表单项设置为只读，数据会提交
disabled将表单项设置为禁用,数据不会提交
autofocus 设置表单项自动获取焦点

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
表单、input——css

文章目录表单简介表单属性表单简介表单:在现实生活中表单用于提交数据在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器使用form标签来创建一个表单表单属性form的属性action表单要提交的服务器的地址 <form action="1.HTML"> </form>文本框注意:数据要提交到服务器中，必须要为元素指定一个name属性。14...
复制链接

扫一扫

专栏目录