HTML中表单的基本用法

最新推荐文章于 2023-07-14 19:00:42 发布

浅浅心事有谁知i

最新推荐文章于 2023-07-14 19:00:42 发布

阅读量660

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/wzfi20042002/article/details/113743377

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

HTML中表单的基本用法

HTML中表单的基本用法

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：

**1.表单框架：**如form标签是一个包含框，里面包含所有表单对象。表单框包含处理表单数据的各种属性。如提交字符编码、与服务器交互的页面、HTTP的提交方式。

**2.表单域：**用于采集用户的输入或选择的数据，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

**3.表单按钮：**用于将数据发送给服务器，还可以控制其他脚本行为，如提交、复位，以及不包含任何行为的一般按钮。

所有表单元素都包含两个基本属性。

**1.name：**定义表单对象的名称，提交表单时，通过name属性名可以访问表单对象的值。

**2.id：**定义表单对象的ID编码。

一.表单标签

功能：用于申明表单，定义采集数据的范围，也就是和里面包含的数据将被提交到服务器或者电子邮件里。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="#" method="get" id="form1" name="form1">
            <p>用户名：
                <input name="" type="text"/>
            </p>
            <p>密码：
                <input name="" type="text"/>
            </p>
            <p>
                <input type="submit" value="提交"/>
            </p>
        </form>
    </body>
</html>

在这里插入图片描述

下面基本介绍3个基本属性：action、enctype、method。

（**1）action：**设置数据提交至服务器的目标页面，该目标页面可以是相对地址也可以是绝对地址。当设置action=“#”时，表示提交给当前页面。

（**2）method：**method=get或post指明提交表单的HTTP方法.可能的值为： post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get：不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用。

**（3）enctype：**enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"。

二、表单域

1.文本框

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

代码格式：

属性解释：

type="text"定义单行文本输入框；

name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

size属性定义文本框的宽度，单位是单个字符宽度；

maxlength属性定义最多输入的字符数。

value属性定义文本框的初始值。

样例1代码：

<input type="text" name="example1" size="20" maxlength="15" />

2.多行文本框

也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

代码格式：

属性解释：

name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

cols属性定义多行文本框的宽度，单位是单个字符宽度；

rows属性定义多行文本框的高度，单位是单个字符宽度；

wrap属性定义输入内容大于文本域时显示的方式，可选值如下：

默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现； Off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行； Virtual，允许文本自动换行。 Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。

样例2代码：

<TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA>

3.密码框

是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

代码格式：

属性解释：

type="password"定义密码框；

name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

size属性定义密码框的宽度，单位是单个字符宽度；

maxlength属性定义最多输入的字符数。

样例3代码：

<input type="password" name="example3" size="20" maxlength="15">

4.隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式：

属性解释：

type="hidden"定义隐藏域；

name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

value属性定义隐藏域的值

例如：

<input type="hidden" name="ExPws" value="dd">

5.复选框

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

代码格式：

属性解释：

type="checkbox"定义复选框；

name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

value属性定义复选框的值

样例4代码：

<input type="checkbox" name="yesky" value="09">

<input type="checkbox" name="Chinabyte" value="08">

6.单选框

当需要访问者在单选项中选择唯一的答案时，就需要用到单选框了。

代码格式：

属性解释：

type="radio"定义单选框；

name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；

value属性定义单选框的值，在同一组中，它们的域值必须是不同的。

样例5代码：

<input type="radio" name="myFavor" value="1">
<input type="radio" name="myFavor" value="2">

7.文件上传框

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。

注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成POST。

代码格式：

属性解释：

type="file"定义文件上传框；

name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

size属性定义文件上传框的宽度，单位是单个字符宽度；

maxlength属性定义最多输入的字符数。

样例6代码：

<input type="file" name="myfile" size="15" maxlength="100">

8.下拉选择框

下拉选择框允许你在一个有限的空间设置多种选项。

代码格式：

...

…

属性解释：

size属性定义下拉选择框的行数；

name属性定义下拉选择框的名称；

multiple属性表示可以多选，如果不设置本属性，那么只能单选；

value属性定义选择项的值；

selected属性表示默认已经选择本选项。

样例7代码：

<select name="mySel" size="1">
<option value="1" selected></option>

<option value="d2"></option>

</select>

样例8代码：

<select name="mySelt" size="3" multiple>

<option value="1" selected></option>

<option value="d2"></option>

<option value="3"></option>

</select>

三、表单按钮

表单按钮控制表单的运作。

1.提交按钮

提交按钮用来将输入的信息提交到服务器。

代码格式：

属性解释：

type="submit"定义提交按钮；

name属性定义提交按钮的名称；

value属性定义按钮的显示文字；

样例9代码：

<input type="submit" name="mySent" value="发送">

2 .复位按钮

复位按钮用来重置表单。

代码格式：

属性解释：

type="reset"定义复位按钮；

name属性定义复位按钮的名称；

value属性定义按钮的显示文字；

样例10代码：

<input type="reset" name="myCancle" value="取消">

3.一般按钮

一般按钮用来控制其他定义了处理脚本的处理工作。

代码格式：

属性解释：

type="button"定义一般按钮；

name属性定义一般按钮的名称；

value属性定义按钮的显示文字；

onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；

样例11代码：

<input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')">

综合使用案例

<form action="" method="post">

        <p> <span>姓名:</span>
            <input id="name" type="text" name="name" placeholder="你的真实姓名" />
        </p>
        <p> <span>Email :</span>
            <input id="email" type="email" name="email" placeholder="你的电子邮箱" />
        </p>
        <p> <span>内容:</span>
            <textarea id="message" name="message" placeholder="你要留给我们的话"></textarea>
        </p>
        <p> <span>主题:</span>
            <select name="selection">
                <option value="subject1">主题1</option>
                <option value="subject2">主题2</option>
            </select>
        </p>
        <p> 
            <input type="button" class="button" value="提交" />
        </p>
    </form>

在这里插入图片描述

浅浅心事有谁知i

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML中表单的基本用法

HTML中表单的基本用法表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：**1.表单框架：**如form标签是一个包含框，里面包含所有表单对象。表单框包含处理表单数据的各种属性。如提交字符编码、与服务器交互的页面、HTTP的提交方式。**2.表单域：**用于采集用户的输入或选择的数据，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。**3.表单按钮：**用于将数据发送给服务器，还可以控制其他脚本行为，如提交、复位，以及不包含任何行为的一般按钮。所有
复制链接

扫一扫