以模仿微博顶部搜索框为例:
<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 若完成所以作业后还有剩余的时间,就会再好好完善了:)尽量做好吧!
今天学习笔记先到这拉!
第一次写博客,写的有点乱七八糟,以后会越来越好的