搜索图标在搜索框内的搜索框的编写(宛如绕口令一般的标题)

本文介绍如何使用HTML和CSS创建一个带有图标的内嵌搜索框,包括表单元素、文本框、单选和复选框、下拉列表框及按钮等元素的详细配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

以模仿微博顶部搜索框为例:
微博截图

<div style="height: 28px;width: 468px;">
    <input type="text" name="search"  class="w" placeholder="大家都在搜:……">
    <a href=" " title="搜索" class="fiction">f</a>
</div>

css样式

    .w{
    width: 425px;
    position: absolute;
    padding: 4px 33px 4px 10px;
    height: 20px;
    line-height: 20px;
    border: none;
    background: transparent;
    color: #808080;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: 0;
}
.fiction{
    position: absolute;
    top: 12px;
    left: 454px;
    color: #808080;
    font-size: 18px;
    width: 18px;
    display: inline-block;
}

效果图如下
这里写图片描述
搜索图标暂时由“f”代替,等找到合适的图标再将其替换。

表单标签及文本框

<form method="传送方式" action="服务器文件">
<input type="text/password" name="xxx" value/placeholder="xxx"/>
</form>
123
form表单标签所有表单文件(文本框、文本域、按钮、单选框、复选框等)都必须放在表单标签内
method传输数据的方式(get/post)
action浏览者输入的数据被传送到的地方,如一个PHP页面
text文本纯文本信息
password密码输入密码,字符会被屏蔽
name名称为文本框命名以备后台程序ASA、PHP使用
value为文本输入框设置默认值(一般起提示作用)
placeholder规定可描述输入字符预期值的简短的提示信息

value与placeholder区别:
若使用的是value,单击文本框时,提示的信息会自动填入文本框内,即默认成为输入内容,可删除。
而在使用placeholder中,提示的信息不会成文文本信息,未输入文本内容时,提示信息不会消失,当输入文本内容时,提示内容会自动消失。双击文本框或输入与提示内容相似内容时,会出现下拉栏,供选择提示信息,选择后可自动填入文本框中,选择后文本框背景色会默认变成蛋黄色。

单选框、复选框

<form>
    <!-- 单选框 -->
    <label>属性1:</label>
    <label>选项1</label>
    <input type="radio" name="a" value="1">
    <label>选项2</label>
    <input type="radio" name="b" value="2">
    <br>
    <!-- 复选框 -->
    <label>属性2:</label>
    <label>选项1</label>
    <input type="checkbox" name="c" value="3">
    <label>选项2</label>
    <input type="checkbox" name="d" value="4">
    <label>选项3</label>
    <input type="checkbox" name="e" value="5">
    <label>选项4</label>
    <input type="checkbox" name="f" value="6">
</form>

效果图:
单选框与复选框

12
<’label>为input元素定义标注(标记),label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
radio单选框(*选择后不可取消)
checkbox复选框(选择后可取消)
checked设置checked=”checked”时,该选项被默认选中

select标签

<form>
    <label>属性</label>
    <select>
        <option value=" 1">选项1</option>
        <option value=" 2" selected="selected">选项2</option>
        <option value=" 3">选项3</option>
    </select>
</form><br><br>
<form>
    <label>属性</label>
    <select multiple="multiple">
        <option value=" 1">选项1</option>
        <!-- value是向服务器提交的值,选项1代表显示的值 -->
        <option value=" 2">选项2</option>
        <option value=" 3">选项3</option>
        <option value=" 4">选项4</option>
        <option value=" 5">选项5</option>
    </select>
</form>

效果图
选择

12
<’sleect>下拉列表框
multiple进行多选,按ctrl同时“单击”即可,(Mac系统中 command+单击)
selected设置selected=”selected”时,该选项被默认选中

文本域

<textarea rows="行数" cols="列数">文本</textarea>

效果图
文本域
*cols 与 rows 可用css样式的width->cols、height->rows代替.
*文本为默认值,自动输入
*默认的文本域可随意拉伸,通过拖动右下角的箭头即可
若想文本域不可拉伸,可加入css属性:resize:none即可

扩充:resize属性的各个取值

12
none用户不能操纵机制调节元素的尺寸
both用户可以调节元素的宽度和高度
horizontal用户可以调节元素的宽度
vertical用户可以调节元素的高度

按钮

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

效果图
按钮
*value的值为按钮上显示的内容




如何写出图标在搜索框内的搜索框

回到今天想要写的内容。
将按钮设计在搜索框内是现在比较常用的设计方法,如以下
百度搜索框

搜索框

这里写图片描述

此外,不一定得是搜索框需要这样的设计,反正这是一种常见的设计模式。
我所模仿的思路:
先建立一个块元素,将所需要的css属性设置好,*设好边框样式
在块内建立文本输入框,同样将css属性设置好,*将背景色设为透明
其次建立一个块元素,可将搜索图标包含在内即可
具体做法就如最开头的代码。

总结
今天主要是学习了搜索框这么写,主要是通过去查阅资料去写的,顺便将有关表单的基本内容看了一遍,还有些深入的得大概会等到以后有用到的地方再学习。今天决定大作业的第一个静态页面是模仿微博的主页,因为微博的页面有很多板块,每一个板块都或多或少可以学习的地方,不过微博页面板块有点多,所以可能会精简的模仿,以减少时间,不过可能还是会花费不少时间orz 若完成所以作业后还有剩余的时间,就会再好好完善了:)尽量做好吧!
今天学习笔记先到这拉!
第一次写博客,写的有点乱七八糟,以后会越来越好的

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值