HTML培训No.2

bioioid_song

已于 2022-02-05 20:47:32 修改

阅读量354

点赞数

文章标签： html 前端 css3

于 2022-02-05 20:43:27 首次发布

本文链接：https://blog.csdn.net/m0_49786709/article/details/122792764

版权

HTML表单

select下拉选项

注：当option设置了value属性值时，提交的数据是value对应的值；如果未设置value，则提交的数据是文本值。

<select name=">
	<option value="值">文本</option>
</select>

multiple=”multipe“ 设置后可以选多个值
name：规定下拉列表的名称
size：规定下拉列表中可见选项的数目
disabled：禁用某个选项

label

for：规定label与哪个表单元素绑定
form：规定label字段所属的一个或多个表单
label自动聚焦
设置label标签的for属性值与表单元素的id属性值对应，当点击label属性时会自动给表单元素聚焦

<form action="demo_form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>

在这里插入图片描述

input输入域

你可以使用 label元素来定义 input元素的标注。
input 元素在 form 元素中使用，用来声明允许用户输入数据的 input 控件。

type：type属性规定要显示的input
value：指定input元素value的值
name：name属性规定input元素的名称
width：width属性规定input元素的宽度（只针对type=“image”）
size：size属性规定以字符数计的input元素的可见宽度
reqiured：属性规定必须在提交表单之前填写输入字段
placeholder：属性规定可描述输入input地段预期值的简短的提示信息

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

textarea文本域

rows：行数
cols：列数

button按钮

<button type="button">点我!</button>w

name：规定按钮的名称
type：规定按钮的类型。可设置为button reset submit
value：规定按钮的初始值，可由脚本进行修改。

复选框

<input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

在这里插入图片描述

作业总结

input输入框(带搜索按钮)

<style>
#aim{
		position:relative;
        left:100px;
        background:transparent;/*使输入框透明*/
        height:30px;
        width:200px;
        font-size:16px;
        border:1px solid rgb(150,150,150);
        outline:none;
        
        background-image:url(搜索.png);/*设置小图标*/
        background-size:25px 25px;/*小图标的大小*/
        background-position:170px 4px;/*小图标在input的位置*/
        background-repeat:no-repeat;/*背景小图标不重复*/
}
</style>
<body>
<input type="text" placeholder="请输入关键字" id="#aim">
</body>