CSS基础-18-表单示例

已于 2022-11-18 23:57:45 修改
阅读量290 收藏 2
点赞数
分类专栏： # CSS基础教程 文章标签： css css3 html 表单
于 2022-04-28 20:28:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingzuo_1840/article/details/123544775
版权

文章目录

1. 输入框 input

1.1 简易输入框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world</title> 
<style> 
input {
  width: 100%;
}
</style>
</head>
<body>

<form>
  <label for="fname">搜索</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>
  • 效果

1.2 可用属性选择器

  • 选取文本输入框
input[type=text]
  • 选择密码的输入框
input[type=password]
  • 选择数字的输入框
input[type=number]

1.3 设置边框

<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>

说明

  • box-sizing: border-box表示：
    元素的完整高度/宽度 = 定义的高度/宽度(width) + 内边距(padding) + 边框(border)
  • 效果
    在这里插入图片描述

1.4 聚焦变化

  • 示例 聚焦填色
input[type=text]:focus {
  background-color: lightblue;
}
  • 效果
    在这里插入图片描述
  • 示例 聚焦变边框
input[type=text]:focus {
  border: 3px solid #555;
}

1.5 搜索框加图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world</title> 
<style> 
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('./images/mix/searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>搜索:</p>

<form>
  <input type="text" name="search" placeholder="搜索..">
</form>

</body>
</html>
  • 效果
    在这里插入图片描述

2. 文本框示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world</title> 
<style> 
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;  /* 圆角 */
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
</style>
</head>
	
<body>
<p><strong>提示:</strong> 随便写一些内容</p>
<form>
  <textarea>一些文本...</textarea>
</form>
</body>
</html>
  • 效果
    在这里插入图片描述

3. 下拉菜单示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world</title> 
<style> 
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<p>选择武将</p>

<form>
  <select id="country" name="country">
  <option value="guanyu">关羽</option>
  <option value="zhangfei">张飞</option>
  <option value="zhaoyun">赵云</option>
  </select>
</form>

</body>
</html>
  • 效果
    在这里插入图片描述

4. 按钮示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world</title> 
<style> 
input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<p>按钮样式</p>

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

</body>
</html>
  • 效果
    在这里插入图片描述

5. 表单综合示例

5.1 示例 1

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* 清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
</style>
</head>
<body>

<h2>响应式表单</h2>

<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    </div>
  </div>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>

</body>
</html>
  • 效果
    在这里插入图片描述

5.2 示例2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world</title> 
</head>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>使用 CSS 来渲染 HTML 的表单元素</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>
  • 效果
    在这里插入图片描述

玄德公笔记
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
纯CSS实现表单验证的示例代码
12-30
在我们的日常业务中，表单验证是个很常见设计需求，像一些登录注册框，问卷调查也都需要用到表单验证。 一般我们的实现思路都是JS监听input框的输入内容，判断用户输入内容，从而以此来决定下一步的操作。 例如这样...
CSS中的表单
liu0218的博客
08-04 1890
作用：将用户填写的信息发送给服务器，例如账号注册、个人资料修改等等。表单控件等等
CSS案例讲解-表单部件
小院里的霍大侠
12-14 123
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
CSS之表格与表单
m0_68276272的博客
11-26 932
基本的表格格式与表单格式
CSS-表格表单_BFC
2301_80864686的博客
11-04 1459
（1）盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止margin重叠）（3）overflow的值不为visible—单纯的div不是BFC，如果添加了overflow：hidden等就是BFC。（2）float的值不为none—单纯的div不是BFC，如果添加了浮动就是BFC。（3）计算 BFC 的高度时，浮动元素也参与计算（应用：清除内部浮动）（2）BFC的区域不会与浮动的盒子发生重叠（应用：自适应两栏布局）（2）调整单元格与单元格之间的间距。
html+css----表单
m0_57124753的博客
07-16 347
datalist：设置input可能选择的标签选项，input的**list**值等于**datalist**的**id**值，option设置选项。get 数据随form跳转的url一起传输，数据内容会在跳转页面的地址栏显示，不能传输敏感数据。<input list="gege"> //没有type="text"也可以用。radio 单选按钮，在一组数据中选择一个，相同name值的为一组。submit 提交，只是将数据提交到浏览器。<input type="submit" value="提交">
前端表单示例代码-简单的表单
07-27
在"前端表单示例代码-简单的表单"这个项目中，我们可以看到 Vue.js 和 Element UI 结合使用来创建表单的实例。下面将详细介绍这两个技术及其在表单开发中的应用。 1. Vue.js：Vue.js 的核心特性在于其响应式数据...
CSS属性 - white-space 空白属性使用说明
10-30
* 在表单元素中，我们可以使用 white-space 属性来控制文本的换行方式。 * 在布局元素中，我们可以使用 white-space 属性来控制元素的换行方式。 示例代码 以下是一个简单的示例代码，演示了 white-space 属性的...
css3用户体验注册表单.zip
07-05
在这个"css3用户体验注册表单.zip"压缩包中，我们很可能会找到一个利用CSS3来提升注册表单用户体验的示例。 首先，让我们深入了解一下CSS3在创建注册表单时如何改善用户体验。CSS3引入了许多新特性，如伪类选择器、...
css表单的实现方法
weixin_58430903的博客
04-30 1774
首先，在html中，表单以<form>标记开头， form标签：装表单的内容。 input标签：也就是输入框，它的属性最常见的placeholder代表输入框中提示文字。为了区分不同的输入框，其属性type="sign";可以自定义，在css引用过程中在inpu后面标注[input="sign"],类似这样即可。 label标签：其次就是对输入框的说明，即对input标签的标注。 select标签：与input输入框类似，不同的是，它是选择的框...
CSS表单设计最简单的，最基本的，CSS表单代码，html代码，表单标准化设计
12-05
最简单的，最基本的，CSS表单代码，html代码，表单标准化设计
BootStrap-CSS样式_排版_表单、表单控件
LoveyourselfJiuhao的博客
12-01 2023
1. 基本表单 form样式：默认不显示，基本表单 form-group样式：表单内设置分组 form-control样式：设置控件并绑定控件默认样式 2. 内联表单 form-inline样式：设置为内联排列表单 3. 水平排列表单 form-horizontal样式：设置为水平排列表单 4. 表单支持控件 type="text"：文本框 textarea标签：多行文本框 ...
css构建表单(超详细)
m0_57287985的博客
02-16 228
看完上面两张图之后是不是清晰多了呢。
012day(表单，表单的css样式，post和get，h5新增加的表单type属性值，h5新增的表单属性，h5新增加的表单标签，bfc)
w296932099的博客
07-26 347
一、表单 1、表单的作用：用来收集用户的信息的; 2、表单的组成： ①表单域：（表单的区域） <form name="" method="get/post" action=""></form> ②表单控件 ： <input type="text" value=""/> 3⃣提示信息（请输入姓名） 3、单选框radio 请选择你的性别<input type="radio" name="sex">男 <input type="radio" n
css---表单
wxhxmj的博客
07-22 76
from action="#">-----------所以表单标签必须在<from>中使用------action：把表单提交到“#”处理。Autocomplete="off/on"-------提交后恢复默认。-------扩大选择（有效点击范围）---文字区域。disable------禁用(整个表单）maxlength-----最大长度。Placeholder=“”------提示词。<input>------基本框架。Multiple-----展示所有选项。Selected-----默认选中。
HTML_CSS学习：表格、表单、框架标签
最新发布
m0_74972727的博客
03-21 720
【代码】HTML_CSS学习：表格、表单、框架标签。
CSS--表单标签
m0_67968118的博客
08-28 725
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义。(9) input系列标签-按钮场景：在网页中显示不同功能的按钮表单控件。1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来。后端接收到数据的格式是：name的属性值 = value的属性值。• form使用方法：用form标签把表单标签一起包裹起来即可。在网页中显示收集用户信息的表单效果，如：登录页、注册页。3.在label标签的for属性中设置对应的id属性值。场景：在网页中显示输入单行文本的表单控件。
CSS3表格和表单样式
码说芯语的博客
10-31 4977
表格和表单样式
CSS——表格和表单
jiuyue_77的博客
08-07 652
掌握表格和表单相关的标签。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玄德公笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值