html学习5(表单)

最新推荐文章于 2024-11-15 10:26:18 发布

木有童年

最新推荐文章于 2024-11-15 10:26:18 发布

阅读量617

点赞数

分类专栏： HTML学习文章标签： html 前端

本文链接：https://blog.csdn.net/Natuly/article/details/132034948

版权

HTML学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的表单元素，包括文本域、下拉列表、单选/复选按钮，以及它们的type属性设置。重点讲解了action和method属性的作用，区分了POST和GET方法，并展示了示例代码。

摘要由CSDN通过智能技术生成

1、表单是一个包含表单元素的区域，用于收集用户的输入信息。

2、表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

3、表单输入一般用输入标签<input>，输入的类型由type属性决定，其中的类型有文本框、单选按钮、多选按钮、密码、提交按钮、重置等。

4、表单元素单选按钮的设置属性：

value：提交数据到服务器的值(后台程序php使用)

name：为控件命名，以备后台程序php使用

5、下拉列表用<select>，列表选项用<option>标签。

6、表单的action属性用于指定执行动作的文件名。

7、表单的method属性用于指定数据的传输方式。

8、post方法：表单数据会包含在表单体内发送给服务器内，用于提交用户名、密码等敏感数据。

9、get方法：表单数据会附加值action属性的url中，以?作为分隔符，一般不用于敏感信息。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML表单</title>
    </head>
    <body>
        <form action="">
            firstname:<input type="text" name="firstname"><br><!--普通文本-->
            lastname:<input type="text" name="lastname">
            username:<input type="text" name="user"><br>
            password:<input type="password" name="password"><!--密码-->
            性别：<input type="radio" name="sex" value="male">男<br><!--单选-->
           <fieldset>
            <legend>编程语言集锦</legend>
            编程语言：<input type="checkbox" name="language" value="PHP">PHP<br><!--多选-->
            <select name="编程语言"><!--下拉列表-->
                <option value="PHP" selected>PHP</option>
                <option value="JAVA">JAVA</option>
                <option value="PYTHON">PYTHON</option>
            </select>

            </fieldset>
            <br>
            <input type="button" value="hello php"><!--按钮-->
            <input type="submit"><br>
            <input type="reset" name="button" id="button" value="重置"> <!--重置按钮-->
            <label>您好</label>
            <input name="submitted-name" autocomplete="name">
        </form>
    </body>

运行结果：