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

简介: 编程笔记 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>

小结

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

相关文章
|
2天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
15 0
|
5天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
9 0
|
23天前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
12 0
|
1月前
使用html+css制作一个发光立方体特效
使用html+css制作一个发光立方体特效
20 2
使用html+css制作一个发光立方体特效
|
1月前
超简单的html+css魔幻霓虹灯文字特效
超简单的html+css魔幻霓虹灯文字特效
12 3
超简单的html+css魔幻霓虹灯文字特效
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
20 0
|
1月前
|
JavaScript 前端开发
HTML JS 应用
HTML JS 应用
18 3
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。