为什么需要表单?表单的组成?

最新推荐文章于 2024-11-13 16:39:04 发布

数缘科技营销

最新推荐文章于 2024-11-13 16:39:04 发布

阅读量875

点赞数

分类专栏： html语法 Web开发文章标签： elementui javascript html

本文链接：https://blog.csdn.net/weixin_66455621/article/details/123224577

版权

Web开发同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

html语法

7 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的表单元素，包括表单的作用、组成、表单域的定义和属性、<input>标签的各种类型及其属性、<label>标签的使用以及<select>和<textarea>标签的用法。内容涵盖了收集用户信息、表单控件和交互提升用户体验等方面。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <h2><b>表单标签</b></h2>
    <p>网页中的表单展示</p>
    <ol>
        <li>为什么需要表单</li>
        <li>表单的组成</li>
    </ol><p></p>

    <h3><b>为什么需要表单？</b></h3>
    使用表单目的是为了<font color="red">收集用户信息</font>。<p></p>
    在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。<p></p>

    <h3><b>3.2&#160;表单的组成</b></h3>
    在HTML中，一个完整的表单通常由<font color="red">表单域、表单控件（也称为表单元素）</font>和<font color="red">提示信息</font>3个部分构成。<p></p>

    <h3><b>3.3&#160;表单域</b></h3>

    </font>和<font color="red">表单域</font>是一个包含表单元素的区域。<p></p>
    在HTML标签中，</font>和<font color="red">&lt form &gt </font>标签用于定义表单域，以实现用户信息的收集和传递。<p></p>
    <font color="red">&lt form &gt 会把它范围内的表单元素信息提交给服务器。</font><p></p>

    语法格式：<p></p>
    &lt form action="url地址" method="提交方式" neme="表单域名称" &gt 各种表单元素控件 &lt /form &gt <p></p>

    <b>常用表单域属性标签</b>：<p></p>
    <p>基础班来说我们暂时不用表单域提交数据只需要上form标签即可，就业班学习服务器编程阶段会重新讲解。</p>

    <table align="center" border="1" cellpadding="10" cellspacing="0">
        <tr>
            <th>属性</th>
            <th>属性值</th>
            <th>作用</th>
        </tr>
        <tr>
            <td>action</td>
            <td>url地址</td>
            <td>用于指定接收并处理表单数据的服务器程序的url地址。</td>
        </tr>
        <tr>
            <td>method</td>
            <td>get/post</td>
            <td>用于设置表单数据的提交方式，其取值为get和post</td>
        </tr>
        <tr>
            <td>neme</td>
            <td>名称</td>
            <td>用于指定表单的名称，以区分同一个页面中的多个表单域。</td>
        </tr>
    </table>

    <!--案例-->
    <form action="demo.php" method="POST" name="name1"></form><p></p>

    <h3><b>3.4.1&#160; &lt input &gt 表单元素</b></h3>

    <p>在英文单词中，input是输入的意思，而在表单元素中<font color="red">&lt input &gt 标签用于收集用户信息</font></p>

    <p>在&lt input &gt标签中，包含一个<font color="red">type</font>属性，根据不同的<font color="red">type</font>属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。</p>

    <p>语法如下：</p>
    &lt input type="属性值"/ &gt<p></p>

    <ul>
        <li>&lt input / &gt 标签为单标签。</li><p></p>
        <li>type属性设置不同的属性值用来指定不同的控件类型</li><p></p>
    </ul>

    <p><font color="red">type</font>属性的属性值及其描述如下：</p>

    <table align="center" border="1" cellpadding="10" cellspacing="0">
        <tr>
            <th>属性值</th>
            <th>描述</th>
        </tr>
        <tr>
            <td>button</td>
            <td>定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）</td>
        </tr>
        <tr>
            <td>checkbox</td>
            <td>定义复选框</td>
        </tr><tr>
            <td>file</td>
            <td>定义输入字段和“浏览”按钮，供文件上传</td>
        </tr><tr>
            <td>hidden</td>
            <td>定义隐藏的输入字段</td>
        </tr><tr>
            <td>image</td>
            <td>定义图像形式的提交按钮</td>
        </tr><tr>
            <td>password</td>
            <td>定义密码字段，该字段中的字符被掩码</td>
        </tr><tr>
            <td>radio</td>
            <td>定义单选按钮</td>
        </tr><tr>
            <td>reset</td>
            <td>定义重置按钮，重置按钮会清除表单中的所有数据</td>
        </tr>
        <tr>
            <td>submit</td>
            <td>定义提交按钮，提交按钮会把表单数据发送到服务器</td>
        </tr>
        <tr>
            <td>text</td>
            <td>定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。</td>
        </tr>
        <tr>
            <td>value</td>
            <td>由用户自定义，规定input元素的值</td>
        </tr>
        <tr>
            <td>checked</td>
            <td>checked规定此input元素首次加载的应当被选中。</td>
        </tr>
        <tr>
            <td>maxlenght</td>
            <td>正整数，规定输入字段中的字符的最大长度</td>
        </tr>
    </table><p></p>

    <ol>
        <li>name和value是每个表单元素都有的属性值主要给后台人员使用。</li><p></p>
        <li>name表单元素的名字，要求<font color="red">单选按钮和复选框要有相同的name值</font></li><p></p>
        <p><li><font color="red">checked属性主要针对于单选按钮和复选框</font>主要作用一打开页面就要可以默认选中某个表单元素。</li></p>
        <li>maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。</li>
    </ol><p></p>
    <form action="xxx.php" method="get">
        <!--文本框 用户可以在里面输入任何文字-->
       用户名： <input type="text" neme="yh" value="请输入用户名"> <p></p>
       <!--password 密码框 用户看不见输入的密码-->
       密码：<input type="password" neme="psw" maxlength="6"><p></p>
       <!--radio 单选按钮-->
       <!--name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1-->
       <!--单选按钮和复选框可以设置 checked 属性，当页面打开的时候就可能默认选中这个按钮-->
       性别：男 <input type="radio" name="one" value="男" checkde="checkde"> 女 <input type="radio" name="one" value="女"><p></p>
       <!--checkbox 复选框 可能实现多选-->
       爱好：学习<input type="checkbox" checkde="checkde"> 看书<input type="checkbox">看电影<input type="checkbox"><p></p>
       <!--sumbmit 提交按钮，提交按钮会把表单数据发送到服务器-->
       <!--点击了提交按钮，可以把表单域 form 里面的表单元素里面的值，提交给后台服务器-->
       <input type="submit" value="免费注册">&#160;&#160;&#160;
       <!--重置按钮可以还原表单元素初始的默认状态-->
       <input type="reset" value="重置填写">&#160;&#160;&#160;
       <!--普通按钮 button 后期结合 js 搭配使用-->
       <input type="button" value="获取短信验证码">&#160;&#160;&#160;
       <!--file 文件域 使用场景，上传文件使用的-->
        上传头像：<input type="file">
    </form><p></p>

    <h3><b>3.42&#160;&lt label &gt 标签</b></h3>
    <p><font color="red">&lt label &gt</font>标签为input元素定义标注（<font color="red">标签</font>）</p>
    <font color="red">&lt label &gt</font>标签用于绑定一个表单元素，当点击&lt label &gt标签内容的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的单元上，用来增加用户体验。
    <p><b>语法如下：</b></p>
    &lt label <font color="red">for="sex"</font> &gt 男 &lt /label &gt<p></p>
    &lt input type="radio" name="sex" <font color="red">id="sex"</font> / &gt<p></p>
    <p>核心：&lt label &gt标签的<font color="red">for属性</font>应当与相关元素的<font color="red">id属性相同</font></p>

    <label for="text">用户名:</label> <input type="text" id="text">
    <input type="radio" id="nan" name="sex"><label for="nan">男</label>
    <input type="radio" id="nu"name="sex" > <label for="nu">女</label><p></p>

    <h3><b>3.4&#160;表单控件（表单元素）</b></h3>
    <p>在表单域中可以定义各种表单元素，这些表单元素是允许用户在表单中输入或者选择的内容控件。</p>
    <p>接下来我们讲解：</p>
    <ul>
        <li>input输入表单元素</li>
        <li>select下拉表单元素</li>
        <li>textarea文本域元素</li>
    </ul><p>

        <h3><b>3.4.3&#160;&lt select &gt 表单元素</b></h3>
        <p>使用场景，在页面中，如果有多个选择让用户选择，并且想要节约页面空间，我们可以使用<font color="red">&lt select &gt</font>标签控件定义<font color="red">下拉列表。</font></p>

        <p><b>语法如下：</b></p>
        <p>&lt select &gt </p>
        <p>&lt option &gt 选择1 &lt /option &gt </p>
        <p>&lt option &gt 选择2 &lt /option &gt </p>
        <p>&lt option &gt 选择3 &lt /option &gt </p>
        <p>&lt /select &gt </p>

        <ol>
            <p><li>&lt select &gt 中至少包括一对&lt option &gt</li>
                <li>在&lt option &gt中定义 selected="selected"，当前项即为默认选中项。</li>
            </ol></p>
        <form>
            籍贯：
            <select>
            <option>四川</option>
            <option>广东</option>
            <option>福建</option>
            <option selected="selected">广西</option>
        </select>
</form><p></p>

    <h3><b>3.4.4&#160;&lt textarea &gt</b></h3>
    <p>使用场景，当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<font color="red">&lt textarea &gt</font>标签。</p>
    <p>在表单元素中，<font color="red">&lt textarea &gt</font>标签是用于定义多行文本输入的控件。</p>
    <p>使用多选文体输入控件，可以输入更多的文字，该控件常见于留言、评论等。</p>

    <p><b>语法如下：</b></p>
   <p>&lt textarea rows="3" cols="20" &gt </p> 
    <p>文本内容</p>
    <p>&lt /testarea &gt</p>

    <ul>
        <li>通过&lt textarea &gt标签可以轻松地创建多文本输入框。</li>
        <li>cols="每行中的字符数"，rows="显示的行数"，<font color="red">我们在实际开发中不会使用，都是用CSS来改变大小。</font></li>
    </ul>

    <form>
        今日反馈：
        <textarea cols="50" rows="5" >每天学习HTML标签语言，标签语言很多，需要反复练习。不懂的，要反复看视频、上网查找，直到解决为止。
        </textarea>
    </form>

    </p>
</body>
</html>

表单标签

网页中的表单展示

为什么需要表单
表单的组成

为什么需要表单？

使用表单目的是为了收集用户信息。

在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

3.2 表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

3.3 表单域

和表单域是一个包含表单元素的区域。

在HTML标签中，和< form > 标签用于定义表单域，以实现用户信息的收集和传递。

< form > 会把它范围内的表单元素信息提交给服务器。

语法格式：

< form action="url地址" method="提交方式" neme="表单域名称" > 各种表单元素控件 < /form >

常用表单域属性标签：

基础班来说我们暂时不用表单域提交数据只需要上form标签即可，就业班学习服务器编程阶段会重新讲解。

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get和post
neme	名称	用于指定表单的名称，以区分同一个页面中的多个表单域。

3.4.1 < input > 表单元素

在英文单词中，input是输入的意思，而在表单元素中< input > 标签用于收集用户信息

在< input >标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

语法如下：

< input type="属性值"/ >

< input / > 标签为单标签。
type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值及其描述如下：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。
value	由用户自定义，规定input元素的值
checked	checked规定此input元素首次加载的应当被选中。
maxlenght	正整数，规定输入字段中的字符的最大长度