搜索图标在搜索框内的搜索框的编写（宛如绕口令一般的标题）-优快云博客

本文介绍如何使用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>

1	2	3
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>

效果图：
单选框与复选框

1	2
<’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>

效果图

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

文本域

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

效果图

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

扩充：resize属性的各个取值

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

按钮

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

效果图

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

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

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

搜索框

这里写图片描述

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

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