HTML5+CSS3学习笔记（第8章）表单

最新推荐文章于 2022-07-21 15:18:28 发布

放屁鮰鱼

最新推荐文章于 2022-07-21 15:18:28 发布

阅读量207

点赞数

分类专栏：笔记 CSS3 HTML5

本文链接：https://blog.csdn.net/fangpihuiyu/article/details/104193568

版权

笔记同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML5

16 篇文章 0 订阅

订阅专栏

CSS3

11 篇文章 0 订阅

订阅专栏

HTML5+CSS3学习笔记（第8章）表单

8.1表单概述

form，单选框多选框文本域等

8.2输入标记

form的属性
action指的是表单的提交地址
name属性
enctype表单信息的编码方式
method属性
get方法视为CGI或ASP的参数发送
post表单数据与URL分开发送

8.2.1文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="mr-cont">
    <form action="">
        <label>
            <img src="fish.png" alt="">
            <input type="text">
        </label>
        <label>
            <img src="1.jpg" alt="">
            <input type="password">
        </label>
    </form>
</div>
</form>
</body>
</html>

8.2.2单选框和多选框

radio（一组单选按钮的name值相同）
checkbox

8.2.3按钮

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .cont{
        height: 474px;
        width: 685px;
        margin: 20px auto;
        border: 1px solid #f00;
        background:url("bg.png") ;
    }
    .cont div{
        text-align: center;
        width: 400px;
        margin: 30px 0 0 140px;
    }
    #btn{
        margin-top: 10px;
    }
    #btn input{
        width: 80px;
        height: 30px;
    }
</style>
<body>
<div class="cont">
    <h2>收货信息填写</h2>
    <form action="index.html">
        <div>姓名:
            <input type="text"><span class="red">*****必填项</span>
        </div>
        <div>电话:
            <input type="text"><span class="red">*****必填项</span>
        </div>
        <div>是否允许代收:
            <label>是 <input type="radio" name="receive" checked></label>
            <label>否 <input type="radio" name="receive"></label>
        </div>
        <div class="addr">地址:
            <input type="text" placeholder="--省" size="5">
            <input type="text" placeholder="--市" size="5">
        </div>
        <div>
            <p>具体地址: <span class="red">****必填项</span></p>
            <textarea></textarea>
        </div>
        <div id="btn">
            <input type="submit" value="SUBMIT" onclick="alert(臭傻逼)">
            <input type="button" value="SAVE" onclick="alert('保存信息成功')">
            <input type="reset" value="重置">
        </div>
    </form>
</div>
</body>
</html>

8.2.4 文件域和图像域

图像域文件域

8.3文本域和列表

textarea
列表
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>`在这里插入代码片`
<input type="file" accept="" name="">
<input type="image" src=" " name="">
<select name="" id="">
    <option value="">A</option>
    <option value="" selected="selected">B</option>
</select>
</body>
</html>

放屁鮰鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3学习笔记（第8章）表单

HTML5+CSS3学习笔记（第8章）表单8.1表单概述form，单选框多选框文本域等8.2输入标记form的属性action指的是表单的提交地址name属性enctype表单信息的编码方式method属性get方法视为CGI或ASP的参数发送post表单数据与URL分开发送8.2.1文本框<!DOCTYPE html><html lang="en"...
复制链接

扫一扫

专栏目录