HTML制作表单

最新推荐文章于 2024-02-16 23:45:17 发布

云杰8了

最新推荐文章于 2024-02-16 23:45:17 发布

阅读量2.2k

点赞数 3

分类专栏：笔记 HTML基础知识文章标签： html

本文链接：https://blog.csdn.net/weixin_50821119/article/details/110671259

版权

笔记同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

HTML基础知识

5 篇文章 1 订阅

订阅专栏

HTML表单

一、HTML 表单是什么

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
（例如下图）。

在这里插入图片描述

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>登陆界面</title>
    <style>
        html {
            background-color: #B5DEF2;
        }
        
        .wrapper {
           position: absolute;
            left: 50%;
            margin: 0;
            margin-left: -442px;
            width: 884px;
            min-width: 110px;
        }
        
        .loginBox {
            background-color: #F0F4F6;
            /*上divcolor*/
            border: 1px solid #BfD6E1;
            border-radius: 5px;
            color: #444;
            font: 14px 'Microsoft YaHei', '微软雅黑';
            margin: 0 auto;
            width: 388px
        }
        
        .loginBox .loginBoxCenter {
            border-bottom: 1px solid #DDE0E8;
            padding: 24px;
        }
        
        .loginBox .loginBoxCenter p {
            margin-bottom: 10px
        }
        
        .loginBox .loginBoxButtons {
            /*background-color: #F0F4F6;*/
            /*下divcolor*/
            border-top: 0px solid #FFF;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            line-height: 28px;
            overflow: hidden;
            padding: 20px 24px;
            vertical-align: center;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
        }
        
        .loginBox .loginInput {
            border: 1px solid #D2D9dC;
            border-radius: 2px;
            color: #444;
            font: 12px 'Microsoft YaHei', '微软雅黑';
            padding: 8px 14px;
            margin-bottom: 8px;
            width: 310px;
        }
        
        .loginBox .loginInput:FOCUS {
            border: 1px solid #B7D4EA;
            box-shadow: 0 0 8px #B7D4EA;
        }
        
        .loginBox .loginBtn {
            background-image: -moz-linear-gradient(to bottom, blue, #85CFEE);
            border: 1px solid #98CCE7;
            border-radius: 20px;
            box-shadow: inset rgba(255, 255, 255, 0.6) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 1px 1px;
            color: #444;
            /*登录*/
            cursor: pointer;
            float: right;
            font: bold 13px Arial;
            padding: 10px 50px;
        }
        
        .loginBox .loginBtn:HOVER {
            background-image: -moz-linear-gradient(to top, blue, #85CFEE);
        }
        
        .loginBox a.forgetLink {
            color: #ABABAB;
            cursor: pointer;
            float: right;
            font: 11px/20px Arial;
            text-decoration: none;
            vertical-align: middle;
            /*忘记密码*/
        }
        
        .loginBox a.forgetLink:HOVER {
            color: #000000;
            text-decoration: none;
            /*忘记密码*/
        }
        
        .loginBox input#remember {
            vertical-align: middle;
        }
        
        .loginBox label[for="remember"] {
            font: 11px Arial;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <form action="/chaos/EvilEmail.html" method="post">
            <div class="loginBox">
                <div class="loginBoxCenter">
                    <p>
                        <label for="username">用户名：</label>
                    </p>
                    <!--autofocus 规定当页面加载时按钮应当自动地获得焦点。 -->
                    <!-- placeholder提供可描述输入字段预期值的提示信息-->
                    <p>
                        <input type="text" id="text" name="text" class="loginInput" autofocus="autofocus" required="required" autocomplete="off" placeholder="请输入邮箱/手机号" value="" />
                    </p>
                    <!-- required 规定必需在提交之前填写输入字段-->
                    <p>
                        <label for="password">密码：</label>
                    </p>
                    <p>
                        <input type="password" id="password" name="password" class="loginInput" required="required" placeholder="请输入密码" value="" />
                    </p>
                    <p>
                        <a class="forgetLink" href="#">忘记密码?</a>
                    </p>
                    <input id="remember" type="checkbox" name="remember" />
                    <label for="remember">记住登录状态</label>
                </div>
                <div class="loginBoxButtons">
                    <button class="loginBtn">登录</button>
                    <div> 新用户注册</div>
                </div>
            </div>
        </form>
    </div>
</body>


</html>

二、HTML 表单标签

from标签

form> 标签用于创建供用户输入的 HTML 表单。元素包含一个或多个如下的表单元素：

<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>

下面展示一些 例子。

action属性

值（URL）规定表单点击提交按钮的跳转的地址
绝对 URL - 指向另一个网站（比如 action=“http://www.example.com/example.htm”）
相对 URL - 指向网站内的一个文件（比如 action=“example.htm”）

  <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <input type="submit" value="百度一下">
    </form>

在这里插入图片描述

method 属性

get方法

表单默认是get方法 将表单数据以名称/值对的形式附加到 URL 中。
URL 的长度是有限的（大约 3000 字符）。
绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）。
对于用户希望加入书签的表单提交很有用。
GET 更适用于非安全数据，比如在 Google 中查询字符串。

 <form action="https://www.baidu.com/s" method="GET">
        <input type="text" name="wd">
        <input type="submit" value="百度一下">
    </form>

在这里插入图片描述 POST 方法

将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
没有长度限制
通过 POST 提交的表单不能加入书签

在这里插入图片描述

 <form>
        First name: <input type="text" name="firstname"><br>
         Last name: <input type="text" name="lastname">
    </form>

其他属性描述

属性	值
readonly	规定该片段为只读属性，不可修改 readonly=“readonly”
disabled	输入字段是禁用的。 disabled=“disabled”
size	规定输入字段的尺寸（以字符计）
maxlength	最大输入字符
minlength	最小输入字符
alt	定义图片未显示时的替代文本
autofocus	页面加载完成以后自动聚焦到这个搜索框布尔属性没有值
checked	默认被选中通常指单选或者多选按钮布尔属性没有值
name	规定input框名称
placeholder	规定输入框默认提示文字
required	规定这个输入框必选必填布尔属性没有值
src	规定type属性值为image时，src为图片地址
weight	输入框宽度
height	输入框高度

2、input标签

type属性属性值

type="text"定义一个文本输入框

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

在这里插入图片描述
2. type="text"定义密码字段：

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

在这里插入图片描述
3. 定义提交表单数据至表单处理程序的按钮。

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

在这里插入图片描述
4. input type="radio"定义单选按钮。

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

在这里插入图片描述
5.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>

在这里插入图片描述 6.input type="button 定义按钮。

    HTML5 增加了多个新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

3、文本域

当用户要在表单中键入字母、数字等内容时，就会用到文本域

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

在这里插入图片描述

4、预选下拉列表

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

在这里插入图片描述

我好累，明天再写，意思着看吧

云杰8了

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
HTML制作表单

HTML表单一、HTML 表单是什么1、文本域2、密码字段3、单选按钮4、复选框5、提交按钮一、HTML 表单是什么表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。（例如下图）。# 二、HTML 表单 - 输入元素多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：1、文本域文
复制链接

扫一扫