html表单标签与表单设计

hygge999

已于 2022-04-17 22:58:07 修改

阅读量5k

点赞数 11

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

于 2020-04-17 17:09:57 首次发布

本文链接：https://blog.youkuaiyun.com/z55947810/article/details/105584272

版权

前端专栏收录该内容

9 篇文章

订阅专栏

html表单标签与表单设计

刚刚接触前端的HTML，练习并记录程序。
下面是对HTML表格的整理并总和在一起做的一个小练习。
IDE：VScode、hbuilder

1.form标签及其属性

HTML 表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单使用表单标签<form>和</form>来设置的。
基本语法：

<form name="表单名称" method="提交方法" action="处理程序">···</form>

<form>标签还有有name、method、action、target等属性。
其中：name 代表表单的名称。method 规定用于发送数据所使用的HTML方法（get、post）。action 为处理方法，一般填入URL。target 规定在何处打开URL（_blank、 _self、_parent、 _top、framename）。

2.input标签及其属性

格式：

<input type="域类型" name="名称" value=""/>

<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性可以做出以下分类：

①文本域：text

格式：

<input type="text" name="名称" maxlength="" size="" value=""/>

maxlength属性用来定义此区域输入的最大字符数。例如当maxlength设置为5的时候，文本域内最多只能输入五个数。

<form action="" method="post">
   文本域：<input type="text" name="名称" maxlength="5"/>
</form>

在这里插入图片描述
size属性用来定于此区域显示的尺寸的大小。例如如下size分别为5和20的对比。

size的默认宽度是 20 个字符。

文本域：<input type="text" name="名称" size="5"/>
文本域：<input type="text" name="名称" size="20"/>

在这里插入图片描述
value属性为输入框的值，可以不填，因为当用户在输入框输入值时，value会自动赋值为输入框的值。如果填写，则直接显示在输入框内。

文本域：<input type="text" name="名称" value="我是一个文本域"/>

在这里插入图片描述

②密码域：password

格式：

<input type="password" name="名称" maxlength="" size="" value=""/>

当用户在密码域输入框内输入密码时。输入框区域会显示 “ * ”号代替用户输入的内容。
在这里插入图片描述

③单选按钮：radio

格式：

<input type="radio" name="名称" value="" checked/>

其中checked属性是用来设置该单选按钮默认状态是选中状态。

当有多个互斥的单选按钮时，需要设置相同的name值。这样，每个时刻都只会有一个选项被选中。

单选按钮1：<input type="radio" name="单选" value=""/><br/><br/>
单选按钮2：<input type="radio" name="单选" value="" checked/><br/><br/>

在这里插入图片描述
单击按钮1：

④复选按钮：checkbox

格式：

<input type="checkbox" name="名称" value="" checked/>

因为复选按钮不需要互斥，所以name可以一样，也可以不一样。

复选按钮：<input type="checkbox" name="复选1" value="" checked/><br/>
复选按钮：<input type="checkbox" name="复选2" value="" checked/><br/>
复选按钮：<input type="checkbox" name="复选2" value="" checked/><br/>
复选按钮：<input type="checkbox" name="复选2" value=""/><br/>

在这里插入图片描述

⑤提交按钮：submit

格式：

<input type="submit" name="" value="提交">

能将表单提交给服务器的按钮，实现交互功能。

⑥取消按钮：reset

格式：

<input type="reset" name="" value="清空"><br/><br/>

能将表单全部清空的按钮。

填写了信息的表单：在这里插入图片描述点击取消按钮后：回到了最初的默认状态。

⑦图像按钮：image

格式：

<input type="image" src="">

同提交按钮功能一样，只是由图片代替了按钮，图片的源文件由src属性指定，同时也能设置图片的大小等属性值。

图像按钮：<input type="image" src="miao.jpg" size="100" width="100"><br/><br/>

在这里插入图片描述

⑧文件域：file

格式：

<input type="file" name="" size="" maxlength="">

提供上传文件的功能。
在这里插入图片描述

⑨隐藏域：hidden

格式：

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

用户不能在其中输入信息，用来预设某些要传递的信息。

3.下拉列表框:select 、option

在表单中，可以通过<select>和<option>标签设计一个下拉式列表或带有滚动条的列表，用户可以再列表中选着一个或多个选项。

基本语法：

<select name="" size="" multiple>
    <option value="" selected="">选项一</option>
    <option value="">选项二</option>
    ```
</select>

语法说明：
①<select>标签下：

name：下拉列表的名称。
size：下拉列表框的大小，默认为1。
multiple：允许用户多选，如果缺省，则表示单选。

②<option>标签下：

value：用于选项被选中后提交给服务器的数据。
selected:设置默认状态为选中状态。

<p>课程选择：
<select name="" size="">
  <option value="" selected="">java web</option>
  <option value="">数据预处理</option>
  <option value="">数据挖掘</option>
  <option value="">信息安全技术</option>
  <option value="">马克思主义</option>
</select>
</p>

在这里插入图片描述

4.多行文本框:textarea

基本语法：

<textarea name="" rows="" cols="" wrap="">
  初始值
</textarea>

其中：rows为输入域的行数，cols为输入域的列数，warp用于是否自动换行（hard、soft）。

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

在这里插入图片描述

综合练习：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html表单练习</title>
</head>

<body>
    <form action="" method="get">
        邮箱地址：<input type="text" placeholder="请输入邮箱地址" />@
        <select name="email">
            <option value="qq">qq.com</option>
            <option value="wangyi">163.com</option>
            <option value="google">gmail.com</option>
        </select>
        <br /><br />

        密码：<input type="password" />
        <br /><br />

        性别：<input type="radio" name="gender" checked />男
        <input type="radio" name="gender" />女
        <br /><br />

        验证码：<input type="text" />
        <img src="img/yanzhengma" width="100" height="50" title="这是验证码" />
        <br /><br />

        <!--<input type="button" value=""/>-->
        <button>更换验证码</button>

        <br /><br />
        备注：<textarea name="" id="" cols="30" rows="10"></textarea>

        <br /><br />
        <input type="checkbox" />同意<a href="text/hi.html">"隐私条款"</a>和"隐私权相关政策"
        <br /><br />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>

</html>

总结：
1. 标签用于为用户输入创建 HTML 表单。
① 标签的 action 属性规定当提交表单时，向何处发送表单数据。
② 标签的 method 属性规定如何发送表单数据。主要有get和post两种。其中get方法就是直接填充到URL上，post方法是先与action属性指定的表单建立联系，然后把数据分段传输到服务器。
在这里插入图片描述