web表单标签加练习

最新推荐文章于 2024-10-16 11:23:07 发布

智商不在服务器

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量556

点赞数 9

文章标签：前端

本文链接：https://blog.csdn.net/LIUaiCHEN_/article/details/136892344

版权

表单标签 --- 行内标签

描述：一个完整的表单标签通常由表单域、表单控件（表单元素）和提示信息三部分构成

作用：数据交互（C/S）

（1）表单域 --- <form>

<form>标签用于定义表单域，以实现用户信息的收集和传递，将范围内的表单元素提交给服务器

<form action="https://www.baidu.com" method="get"><!--get类型只能上传字符串-->

（2）表单元素表单元素分为三类：input输入表单元素、select下拉表单元素、textarea文本域元素

【1】input输入表单元素重要属性作用

<1> 文本框：（text）

用户名称：<input type="text" name="username">

<2> 密码框：（password）

<label for="mypass">用户密码：</label> 
<input type="password" name="mypass" id="mypass">

<3> 单选按钮：（radio）

用户性别： 
<input type="radio" value="男" name="gender">男 
<input type="radio" value="女" name="gender">女 
<!-- radio：单选按钮 --> <!-- name：判断其是否为一组 -->

<4> 复选框：（checkbox）

用户爱好： 
<input type="checkbox" name="hobby" id="" value="LOL">LOL<!--checkbox：多选框--> 
<input type="checkbox" name="hobby" id="" value="rap">rap 
<input type="checkbox" name="hobby" id="" value="jump">jump 
<input type="checkbox" name="hobby" id="" value="basketball">basketball

<5> 提交按钮：（submit）

<input type="submit" value="注册">

<6> 重置按钮：（reset）

<input type="reset" value="重置">

<7> 邮箱：（email）

用户邮箱： <input type="email" id="email" name="email">

<8> 文件域：（file）

用户头像：<input type="file" name="avatar" id="avatar">

常用属性

属性值	描述
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的输入按钮
password	定义密码字段。该字段中的字符显示被星号代替
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮。提交按钮将表单数据发送到服务器
text	定义单行输入字段，在其中输入文本，默认宽度为20个字符

【2】select下拉表单元素

页面中有多个选项需用户选择，并且为了保证格式规范和节约空间，用此标签控件定义下拉列表


用户地址：
<select name="address" id="address">
    <option>陕西</option><!-- H5标准下，value值默认为中间写入的值 -->
    <option value="广东" selected>广东</option><!-- selected：默认选中 -->
    <option value="福建">福建</option>
    <option value="广西">广西</option>
</select>

【3】textarea文本域元素

用户输入内容较多，用表单元素标签代替文本框标签。表单元素标签<textarea>是用于定义多行文本输入控件

用户建议或意见：
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 中间不能回车，中间默认为输入 -->
<!-- 文本域 -->

练习：一个用户注册界面

效果图：

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <link rel="stylesheet" href="作业.css">
</head>
<body >
    <div class="zc">
        <div class="yhzc">
            用户注册
        </div>
 
        <div style="width: 300px;margin: auto">
            <div class="small">
                用户名:
            </div>
 
            <div class="kuang">
                <input type="text"style="width: 220px">
            </div>
 
            <div class="small">
                密码:
            </div>
 
            <div class="kuang">
                <input type="password" style="width: 220px">
            </div>
            <div class="small">
                性别:
            </div>
 
            <div class="duoxuan">
                <input type="radio" checked> 男 <input type="radio"> 女
            </div>
 
            <div class="small">
                爱好:
            </div>
 
            <div class="duoxuan">
                <input type="checkbox">写作 <input type="checkbox">听音乐 <input type="checkbox">体育
            </div>
            <div class="small">
                省份:
            </div>
 
            <div class="xiala">
                <select style="width: 100px">
                    <option>陕西省</option>
                    <option>北京市</option>
                </select>
            </div>
            <div class="small">
                自我介绍:
            </div>
 
            <div class="xiala">
                <select multiple style="width: 250px">
                    <option>&nbsp;</option>
                </select>
            </div>
            <div style="height: 70px;line-height: 70px">
                <div style="width: 150px;float: left">
                    <input type="submit" name="提交"style="width: 70px">
                </div>
                <div style="width: 150px;float: left">
                    <input type="reset" name="重置" style="width: 70px">
                </div>
            </div>
        </div>
 
    </div>
 
</body>
</html>

css代码

*{
    background-color: rgb(196, 196, 202);
}
.zc{
    width: 400px;
    height: 460px;
    border: 1px solid black;
    margin: auto;
    margin-top: 70px;
    text-align: center;
}
.yhzc{
    font-size: 32px;
    line-height: 50px;
    font-weight: bold;
    background-color: grey;
}
.kuang{
    width: 220px;
    float: left;
    height: 50px;
    line-height: 50px;
}
.small{
    width: 80px;
    height: 50px;
    line-height:50px;
    float: left;
    text-align: left;
}
.duoxuan{
    width: 220px;
    float: left;
    height: 50px;
    line-height: 50px;
    text-align: left;
}
.xiala{
    width: 220px;
    float: left;
    height: 50px;
    line-height: 50px;
    margin: auto;
}