7-2.表单-HTML基础

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

六、单选框

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.是什么?

（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属性

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

视觉艺术