编程笔记 html5&css&js 022 HTML表单概要-阿里云开发者社区

编程笔记 html5&css&js 022 HTML表单概要

2024-03-01 59

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 编程笔记 html5&css&js 022 HTML表单概要

网页光是输出没有输入可不行，因为输出还是比输入容易，所有就先接触输出，后学习输入。html用来输入的东西叫“表单”。

HTML 表单用于搜集不同类型的用户输入。

一、元素

HTML 表单用于收集用户输入。

元素定义 HTML 表单：

<form>
 .
form elements
 .
</form>

HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素
<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

这是使用的类型：

类型  描述
text  定义常规文本输入。
radio 定义单选按钮输入（选择多个选择之一）
submit  定义提交按钮（提交表单）

文本输入

<input type="text"> 定义用于文本输入的单行输入字段：

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

注释：表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

单选按钮输入

<input type="radio"> 定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一：

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

提交按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

<form action="action.js">
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>

Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

用 <fieldset> 组合表单数据

<fieldset> 元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。

<form action="">
<fieldset>
<legend>Personal information:</legend>
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"></fieldset>
</form>

二、HTML Form 属性

HTML <form> 元素，已设置所有可能的属性，是这样的：

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>

下面是 <form> 属性的列表：

属性  描述
accept-charset  规定在被提交表单中使用的字符集（默认：页面字符集）。
action  规定向何处提交表单的地址（URL）（提交页面）。
autocomplete  规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method  规定在提交表单时所用的 HTTP 方法（默认：GET）。
name  规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate  规定浏览器不验证表单。
target  规定 action 属性中地址的目标（默认：_self）。

三、操作

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>编程笔记 html5&css&js html表单</title>
        <meta charset="utf-8" />
        <style>
            body {
                color: cyan;
                background-color: teal;
            }
            form {
                /* 居中表单 */
                margin: 0 auto;
                /* 显示表单的轮廓 */
                padding: 1em;
                border: 1px solid #ccc;
                border-radius: 1em;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <h1 align="center">编程笔记 html5&css&js html表单</h1>
        <form id="myForm">
            <ul>
                <li>
                    <label for="name">姓名:</label>
                    <input type="text" id="name" name="user_name" />
                </li>
                <li>
                    <label for="email">邮箱:</label>
                    <input type="email" id="email" name="user_email" />
                </li>
                <li>
                    <label for="interests">兴趣:</label>
                    <br />
                    <label for="interest1">运动</label>
                    <input
                        type="checkbox"
                        id="interest1"
                        name="interest"
                        value="运动"
                    />
                    <br />
                    <label for="interest2">音乐</label>
                    <input
                        type="checkbox"
                        id="interest2"
                        name="interest"
                        value="音乐"
                    />
                    <br />
                    <label for="interest3">旅游</label>
                    <input
                        type="checkbox"
                        id="interest3"
                        name="interest"
                        value="旅游"
                    />
                    <br />
                    <br />
                </li>
                <li>
                    <label for="msg">补充:</label>
                    <textarea id="msg" name="user_message"></textarea>
                </li>
            </ul>
            <div class="button">
                <input
                    align="center"
                    type="button"
                    value="提交"
                    onclick="showDialog()"
                />
            </div>
        </form>
        <div align="center" id="rs"></div>
        <script>
            function showDialog() {
                var name = document.getElementById("name").value;
                var email = document.getElementById("email").value;
                var interests = [];
                var checkboxes = document.getElementsByName("interest");
                var msg = document.getElementById("msg").value;
                for (var i = 0; i < checkboxes.length; i++) {
                    if (checkboxes[i].checked) {
                        interests.push(checkboxes[i].value);
                    }
                }
                var result =
                    "姓名: " +
                    name +
                    "\n邮件地址: " +
                    email +
                    "\n兴趣: " +
                    interests.join(", ") +
                    "\n补充：" +
                    msg;
                alert(result);
                document.getElementById("rs").innerHTML(result);
            }
        </script>
    </body>
</html>

小结

混个脸熟吧，先。后面慢慢就真熟了，熟练。

编程笔记 html5&css&js 022 HTML表单概要

一、元素

二、HTML Form 属性

三、操作

小结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

编程笔记 html5&css&js 022 HTML表单概要

一、 元素

二、HTML Form 属性

三、操作

小结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

一、元素