7-2.表单-HTML基础

作者: 見贤思齊_ | 来源:发表于2020-10-06 23:37 被阅读0次

7-2.表单-HTML基础
## HTML基础-表单标签
html表单基础
事件处理--表单事件
$14 表单脚本
慕课网笔记2 : html 与浏览者交互表单标签（form）
【javascript】表单的基础知识
复习
HTML基础——表单标签
HTML 表单的基础

六、单选框

1.是什么?

在HTML中，单选框也是使用Input标签来实现的，其中type属性取值为radio。

（1）语法格式

<input type="radio" name="组名" value="取值" />

① 说明

name属性表示单选框所在组名。

value属性表示单选框的取值。

这两个属性必须设置。

② 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表单</title>
    </head>
    <body>
        <form name="单选框" action="" method="post">
            性别：
            <input type="radio" name="gender" value="男" />男
            <input type="radio" name="gender" value="女" />女 
            <input type="radio" name="gender" value="秘密" />秘密
        </form>
    </body>
</html>

单选框示例1.png

Ⅱ.例2-checked属性

通过checked属性实现在默认情况下，选中哪一个单选框。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表单</title>
    </head>
    <body>
        <form name="单选框" action="" method="post">
            性别：
            <input type="radio" name="gender" value="男" checked="checked"/>男
            <!--
                上面这个语句等价于下面：
            <input type="radio" name="gender" value="男" checked/>男
            -->
            
            <input type="radio" name="gender" value="女" />女 
            <input type="radio" name="gender" value="秘密" />秘密
        </form>
    </body>
</html>

单选框示例2.png

checked="checked"这个语句可以简写为checked，这也是HTML5新规，以后都要写简写形式。

2.name属性

（1）不添加name属性

在上述两个例子中，我都使用了name属性，但和我去掉name属性的效果一样，但是通过点击单选框会发现。

若我们不添加name属性，我们可以在单选框中选择多个选项，这就和单选框的用意相违背。

（2）name属性取值不一样

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表单</title>
    </head>
    <body>
        <form name="单选框" action="" method="post">
            性别：
            <input type="radio" name="gender1" value="男" checked="checked"/>男
            <input type="radio" name="gender2" value="女" />女 
            <input type="radio" name="gender3" value="秘密" />秘密
        </form>
    </body>
</html>

单选框示例name属性取值不一.png

若name属性取值不一样，我们也可以在单选框中选择多个选项，这就和单选框的用意相违背。

① 实际开发

在实际开发中，对于同一组的单选框，必须要设置一个相同的name，只有这样做才会把这些选项归为同一组中。

② 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表单</title>
    </head>
    <body>
        <form name="单选框" action="" method="post">
            性别：
            <label><input type="radio" name="gender" value="男" checked="checked"/>男</label>
            <label><input type="radio" name="gender" value="女" />女 </label>
            <label><input type="radio" name="gender" value="秘密" />秘密 </label>
            <br/>
            国家：
            <label><input type="radio" name="country" value="秦国" />秦国</label>
            <label><input type="radio" name="country" value="齊国" checked/>齊国</label>
            <label>
            <input type="radio" name="country" value="楚国" />楚国
            </label>
        </form>
    </body>
</html>

单选框示例name属性示例1.png

上述代码我加上了label标签这是为了更好的语义化，表单元素与后面的文本一般都需要借助label标签关联在一起。

3.value属性

（1）value属性取值

value属性取值通常跟后面文本相同，之所以加上value属性，是为了JavaScript或服务器操作数据。

所有表单元素的value属性的作用都一样。

七、复选框

1.是什么?

在HTML中，单选框也是使用Input标签来实现的，其中type属性取值为radio。

（1）语法格式

<input type="checkbox" name="组名" value="取值" />

① 说明

name属性表示复选框所在组名。

value属性表示复选框的取值。

这两个属性必须设置。

② 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表单</title>
    </head>
    <body>
        <form name="复选框" action="" method="post">
            春秋五霸：
            <label> <input type="checkbox" name="春秋" value="齐桓公" checked/> 齐桓公 </label>
            <label> <input type="checkbox" name="春秋" value="宋襄公" /> 宋襄公 </label>
            <label> <input type="checkbox" name="春秋" value="晋文公" /> 晋文公 </label>
            <label> <input type="checkbox" name="春秋" value="秦穆公" checked/> 秦穆公 </label>
            <label> <input type="checkbox" name="春秋" value="楚庄王" checked/> 楚庄王 </label>
            
            <br/><br/>
            
            战国七雄：
            <label> <input type="checkbox" name="战国" value="秦" checked/> 秦 </label>
            <label> <input type="checkbox" name="战国" value="齐" checked/> 齐 </label>
            <label> <input type="checkbox" name="战国" value="楚" checked/> 楚 </label>
            <label> <input type="checkbox" name="战国" value="燕" /> 燕 </label>
            <label> <input type="checkbox" name="战国" value="韩" /> 韩 </label>
            <label> <input type="checkbox" name="战国" value="赵" /> 赵 </label>
            <label> <input type="checkbox" name="战国" value="魏" /> 魏 </label>
        </form>
    </body>
</html>

复选框示例1.png

复选框中的name跟单选框中的name都是用来设置组名”的，表示该选项位于哪一组中。

两者均设置name属性，单选框只能选中一项，而复选框可以选择多项，这是因为浏览器会自动识别这是“单选框组”还是“复选框组”（这是根据type属性取值来识别如果是单选框组，就只能选择一项；如果是复选框组,就可以选择多项）

通过使用checked属性使得在默认情况下，让复选框中的某项选中,。

八、按钮

在HTML中，常见按钮有 3 种：button-普通按钮、submit-提交按钮、reset-重置按钮。

1.button-普通按钮

在HTML中，button-普通按钮一般情况下都是配合JavaScript来进行各种操作。

（1）语法格式

<input type="button" value="取值">

① 说明

value属性取值就是按钮上的文字。

② 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>普通按钮</title>
        <script>
            window.onload = function()
            {
                var oBtn = document.getElementsByTagName("input");  /*通过标签名获取元素*/
                oBtn[0].onclick = function()                        /*点击选中的第1个元素*/
                {
                    alert("Dream it possible!");                    /**/    
                };
            }
        </script>
    </head>
    <body>
        <form method="post">
            <input type="button" value="让梦想成为可能"/>
        </form>
    </body>
</html>

普通按钮示例1.png

普通按钮示例1-1.png

2.submit-提交按钮

在HTML中，submit-提交按钮一般用来给服务器提交数据，它其实可以看成特殊的普通按钮。

（1）语法格式

<input type="submit" value="取值">

① 说明

value属性取值就是按钮上的文字。

② 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>提交按钮</title>
    </head>
    <body>
        <form method="post">
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

提交按钮示例1.png

（2）提交范围

提交按钮针对当前所在form标签。

3.reset-重置按钮

在HTML中，reset-重置按钮一般用来清除用户在表单中输入的内容，它其实也可以看成特殊的普通按钮。

（1）语法格式

<input type="reset" value="取值">

① 说明

value属性取值就是按钮上的文字。

② 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>重置按钮</title>
    </head>
    <body>
        <form method="post">
            <label> 账户：<input type="text"> </label> <br/>
            <label> 密码：<input type="password"> </label> <br/>
            <input type="reset" value="重置"/>
        </form>
    </body>
</html>

重置按钮示例1.png

（2）清除范围

重置按钮只能清空它所在form标签内表单中的内容，对于其所在之外。

4.button标签

在HTML中，除了以上 3 种按钮，其实还有一种按钮是使用button标签实现的。

（1）语法格式

<button></button>

① 实际开发

在实际开发中，基本不会用到button标签，了解即可。

5.总结

三种按钮虽然从外观上看起来是一样的，但是实际功能却是不样的。

普通按钮：一般情况下都是配合 JavaScript来进行各种操作的。

提交按钮：一般都是用来给服务器提交数据的。

重置按钮：一般用来清除用户在表单中输入的内容。

九、文件上传

在HTML中，文件上传也是使用input标签来实现的，其中type属性取值为file。

文件上传功能实际上需要用到后端技术，在这里只需把页面效果做出来即可，功能实现不需深究。

（1）语法格式

<input type="file"/>

① 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>重置按钮</title>
    </head>
    <body>
        <form method="post">
            <input type="file"/>
        </form>
    </body>
</html>

文件上传示例1.png

当我们点击 ”选择文件“ 这个按钮时，是上传不了文件的，需要结合后端技术。

十、多行文本框

单行文本框只能输入一行文本，而多行文本框能输入多行文本。

在HTML中，多行文本框使用textarea标签，而不是input标签。

1.语法格式

<textarea rows="行数" cols="列数" value="取值"> 默认内容 </textarea>

（1）说明

多行文本框默认显示文本是在标签内部设置，而不是在value属性中设置的。

通常，不需要设置默认显示文本。

（2）示例

① 例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>多行文本框</title>
    </head>
    <body>
        <form method="post">
            个人简介：<br/>
            <textarea rows="5" cols="19" value="取值">
                阁下尊姓大名啊，从何处来，又要到何处去。
            </textarea>
        </form>
    </body>
</html>

多行文本框示例1.png

2.文本框总结

HTML有 3 种文本框：单行文本框、密码文本框、多行文本框。

单行文本框、密码文本框使用的是input标签；多行文本框使用的是textarea标签。

十一、下拉列表

1.是神马?

在HTML中，下拉列表由 select和option这两个标签配合使用。

这一点与无序列表很像，其中无序列表是由ul和li这两个标签配合使用来表示。

为了更好地理解，我们可以把下拉列表看成是一种特殊的无序列表。

（1）最节省页面空间

下拉列表是一种最节省页面空间的方式，因为它在默认情况下只显示一个选项，只有当我们点击它时才会看到全部选项。

（2）语法格式

<select> <option>选项内容</option> ... </select>

2.select标签属性

在HTML中，select标签常用属性有 2 个。

（1）select标签常用属性

属性	说明
multiple	设置下拉列表可以选择多项。
size	设置下拉列表显示几个列表项，取值为整数。

（2）示例

① 例1-multiple属性

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>下拉列表</title>
    </head>
    <body>
        <form method="post">
            <select multiple>
                <option>君初见</option>
                <option>王小淘</option>
                <option>見贤思齊</option>
                <option>贤思齊</option>
                <option>初见</option>
            </select>
        </form>
    </body>
</html>

select标签multiple属性.png

默认情况下，下拉列表只能选择一项，我们可以通过multiple属性设置下拉列表可以选择多项。

想要选取多项，可以使用“Ctr+鼠标左键”来选取。

下拉列表的 multiple属性没有属性值，这是HTML5的最新写法，这个与单选框中的 checked属性是一样的。

② 例2-size属性

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>下拉列表</title>
    </head>
    <body>
        <form method="post">
            <select size="3">
                <option>君初见</option>
                <option>王小淘</option>
                <option>見贤思齊</option>
                <option>贤思齊</option>
                <option>初见</option>
            </select>
        </form>
    </body>
</html>

select标签size属性.png

有些情况，size属性取值为1、2、3时，会发现在Chrome浏览器中无效。

这是因为Chrome浏览器最低是4个选项，所以我们只能选取4及以上数字。

3.option标签属性

在HTML中，option标签常用属性有 2 个。

（1）option标签常用属性

属性	说明
selected	是否选中
value	选项值

（2）示例

① 例1-selected属性

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>下拉列表</title>
    </head>
    <body>
        <form method="post">
            <select size="4">
                <option>君初见</option>
                <option>王小淘</option>
                <option selected>見贤思齊</option>
                <option>贤思齊</option>
                <option>初见</option>
            </select>
        </form>
    </body>
</html>

option标签selected属性.png

selected属性表示列表项是否被选中，它是没有属性值的，这也是HTML5的最新写法，跟单选框中的checked属性是一样的。

将size属性去掉，只会显示一项。

② 例2-value属性

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>下拉列表</title>
    </head>
    <body>
        <form method="post">
            <select size="4">
                <option value="君初见">君初见</option>
                <option value="王小淘">王小淘</option>
                <option value="見贤思齊">見贤思齊</option>
                <option value="贤思齊">贤思齊</option>
                <option value="初见">初见</option>
            </select>
        </form>
    </body>
</html>

option标签value属性.png

7-2.表单-HTML基础
六、单选框 1.是什么? 在HTML中，单选框也是使用Input标签来实现的，其中type属性取值为radio。 ...
## HTML基础-表单标签
## HTML基础-表单标签 # form标签(表单) #datalist标签 # select标签 # optg...
html表单基础
HTML标签：表单标签* 表单：* 概念：用于采集用户输入的数据的。用于和服务器进行交互。* form：用于定义表...
事件处理--表单事件
表单的基础知识提交表单表单的基础知识在html中，表单是由元素来表示的，它有以下独有的属性和方法actio...
$14 表单脚本
1. 表单基础知识：在HTML中，表单由表示；在JS中，表单由HTMLFormElement类型表示，它继承了...
慕课网笔记2 : html 与浏览者交互表单标签（form）
慕课网: HTML+CSS基础课程网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览...
【javascript】表单的基础知识
表单的基础知识在HTML 中，表单是由元素来表示的，而在JavaScript中，表单对应的则是HTMLForm...
复习
今天在imooc网上复习了HTML的基础！表单表格 ……
HTML基础——表单标签
什么是表单专门用来搜集用户信息的什么是表单元素什么是元素标签/标记/元素均为HTML中的标签格式常见的表...
HTML 表单的基础
1.form表单的作用及常用属性表单在网页中主要负责数据采集功能，把用户填写的信息提交到网站的后台服务器。所以...

7-2.表单-HTML基础

六、单选框

1.是什么?

（1）语法格式

① 说明

② 示例

Ⅰ.例1

Ⅱ.例2-checked属性

2.name属性

（1）不添加name属性

（2）name属性取值不一样

① 实际开发

② 示例

Ⅰ.例1

3.value属性

（1）value属性取值

七、复选框

1.是什么?

（1）语法格式

① 说明

② 示例

Ⅰ.例1

八、按钮

1.button-普通按钮

（1）语法格式

① 说明

② 示例

Ⅰ.例1

2.submit-提交按钮

（1）语法格式

① 说明

② 示例

Ⅰ.例1

（2）提交范围

3.reset-重置按钮

（1）语法格式

① 说明

② 示例

Ⅰ.例1

（2）清除范围

4.button标签

（1）语法格式

① 实际开发

5.总结

九、文件上传

（1）语法格式

① 示例

Ⅰ.例1

十、多行文本框

1.语法格式

（1）说明

（2）示例

① 例1

2.文本框总结

十一、下拉列表

1.是神马?

（1）最节省页面空间

（2）语法格式

2.select标签属性

（1）select标签常用属性

（2）示例

① 例1-multiple属性

② 例2-size属性

3.option标签属性

（1）option标签常用属性

（2）示例

① 例1-selected属性

② 例2-value属性

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读