【HTML5】表单&表单元素（持续更新中.....）

杨不旧

已于 2022-02-19 14:28:43 修改

阅读量2.7k

点赞数 4

分类专栏： HTML 文章标签： html 服务器前端

于 2021-11-12 21:53:12 首次发布

本文链接：https://blog.csdn.net/qq_45152044/article/details/121291144

版权

HTML 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

本文详细介绍了HTML表单的使用，包括form标记、定义域与域标题、各种输入类型如文本、密码、复选框、单选按钮、图像按钮、提交与重置按钮、多行文本输入框、下拉列表框等。还探讨了表单的交互优化，如label的使用和CSS修饰，以及input的隐藏框、日期选择器、电话、邮箱、数字、范围、搜索和URL输入类型。

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

1、表单概述

什么是表单

Web网页在的表单一般用来做网络调查、用户在线注册、信息检索及网站服务提供商向用户采集信息等。表单是较为复杂的HTML元素，经常与脚本、动态网页、后台数据处理等结合在一起使用，是设计动态网页的必备元素。利用表单可以在HTML页面中插入一些表单控件（元素），如文本框、提交按钮、重置按钮、单选按钮、复选框、下拉列表框等，完成各类信息的采集。

1.1 表单标记

表单标记：form标记，以<form>开始，以</form>结束。
表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。

基本语法：

<form name=""  action="" method="" enctype="">

 </form>

其中name、action、method、enctype都为form表单的属性。

name规定表单的名称，规定名称后可利用脚本语言进行控制。

action规定当提交表单时，向何处发送表单数据（值：url）。

method规定如何发送表单数据。post方法主要包含名称/值对，并且无须包含于action属性的URL中。get方法把名称/值对加在action的URL后面并且把新的URL送至服务器，不推荐使用。（method="get"或method=“post”）
enctype规定表单数据在发送到服务器之前应该如何编码。

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.2 定义域和域标题

基本语法：

<form name=""  action="" method="">
           <fieldset>  <!--fieldset 定义域-->
           		<legend  align=" ">域标题内容</legend>  <!--legend 域标题-->
           </fieldset>
</form>

属性说明：
在这里插入图片描述
用法例子：

<form name=""  action="" method="">
           <fieldset align="center">
               <legend align="center">基本信息</legend>
           姓名：<input type="text" name="sn">
           身高：<input type="text" name="sh">
           体重：<input type="text" name="sw">
        </fieldset>
  </form>

网页展示结果：
在这里插入图片描述
------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.3 表单信息输入

基本语法：

<input type="" name="" id="">

1.3.1 单行文本输入框

基本语法：

名字：<input type="text" placeholder="" value=""  autofocus maxlength="" autocomplete="on" size="" readonly>

属性说明：
value=" "：规定input元素的默认值。
value=“请输入您的名字”**：光标进去原有属于文本框中的内容存在。
placeholder=“请输入您的名字”*：例如：placeholder=“请你输入”（提示信息，当光标聚焦进去原有的输入框的东西会没有）
disable=“disable”：禁用，不可选中，disable=disable ，当属性名=属性值时可简写（即只写disable）
autofocus=“autofocus”：光标自动聚焦在输入框里。
maxlength：例如：maxlength=“10” ，即输入长度最长度为10
autocomplete：autocomplete=“on” 当输入一些内容后自动联想，on意思是打开，需要设值要用js去设值。
readonly=” “：规定文本框中的内容只读，不能修改和编辑。
------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.3.2 密码输入框：

基本语法：

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

属性说明：
在这里插入图片描述

用法例子：

<form name=""  action="" method="">
            <input type="password" name="  " maxlength="6" size="30"> 
            <!-- maxlength="6"意思是密码最长为6位  size="30"意思是输入框的长度为30 -->
</form>

网页展示：
在这里插入图片描述

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.3.3 复选框

基本语法：

<input type="checkbox" name="  " value="" checked="  ">

属性说明：
在这里插入图片描述

用法例子：

<form name=""  action="" method="" enctype="">
        <input type="checkbox" name="math" value="" checked="checked">数学
        <input type="checkbox" name="english" value="" >英语
    </form>

网页展示结果：
在这里插入图片描述
------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.3.4 单选按钮

基本语法：

<input type="radio" value=" " checked>

属性说明：
在这里插入图片描述

用法例子：

<form name=""  action="" method="" enctype="">
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
        </form>

网页展示结果：
在这里插入图片描述
注意：如果不把name的值设置一样的无法达到单选的目的，可以自己试一下。
------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.3.5 图像按钮

基本语法：

<form name=""  action="" method="" enctype="">
            <input type="image" name=" " src=" " width=" " height=" ">
        </form>

属性说明：
在这里插入图片描述

用法例子：

<form name=""  action="" method="" enctype="">
            <input type="image" name="image" src="../6.png" width=" " height=" ">
        </form>

网页展示结果：
在这里插入图片描述
设置了width和height用法例子：

<form name=""  action="" method="" enctype="">
            <input type="image" name="image" src="../6.png" width="100px" height=" 100px">
        </form>

1.3.6 提交按钮

基本语法：

<form name=""  action="" method="" enctype="">
            <input type="submit" name=" " value="">
        </form>

属性说明：
在这里插入图片描述

用法例子：

<form name=""  action="" method="" enctype="">
            名字：<input type="text" name="name" value="">
            <input type="submit" name=" " value="提交">
        </form>

网页展示结果：
初始化界面（）后续注意观察红色框内的变化：
在这里插入图片描述
在文本输入框中输入张三后点击”提交“按钮：

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.3.7 重置按钮

基本语法：

<form name=""  action="" method="" enctype="">
            <input type="reset" name=" " value=" ">
        </form>

属性说明：
在这里插入图片描述

用法例子：

 <form name=""  action="" method="" enctype="">
            名字：<input type="text" name="name" value="">
            <input type="reset" name=" " value="清除所有内容">
        </form>

网页展示结果：
初始化界面：
在这里插入图片描述
在文本输入框中输入张三后点击”清除所有内容按钮“：

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.3.8 普通按钮

基本语法：

<form name=""  action="" method="" enctype="">
            <input type="button" name=" " value="注册按钮" onclick=" ">
        </form>

属性说明：
在这里插入图片描述

用法例子：

<form name=""  action="" method="" enctype="">
            名字：<input type="text" name="name" value="">
            <input type="submit" value="提交">
            <input type="reset" name=" " value="清除所有内容">
            <input type="button" name=" " value=" 注册按钮" onclick=" ">
        </form>

网页展示结果：
在这里插入图片描述
------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.3.9 文件选择框

基本语法：

<form name=""  action="" method="" enctype="">
            <input type="file" name=" " value="选择文件">
</form>

属性说明：
在这里插入图片描述

用法例子：

<form name=""  action="" method="" enctype="">
            名字：<input type="text" name="name" value="">
            <input type="submit" value="提交">
            <input type="reset" name=" " value="清除所有内容">
            <input type="button" name=" " value=" 注册按钮" onclick=" ">
            <input type="file" name=" " value="选择文件">
        </form>

网页展示结果：
运行初始化界面：
在这里插入图片描述
点击”选择文件“按钮后：

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.3.10 隐藏框

基本语法：

<form name=""  action="" method="" enctype="">
            <input type="hidden" name=" " value="">
</form>

属性说明：
在这里插入图片描述
设置input标记的type属性值为hidden，可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会抑制器提交到服务器，但隐藏框在网页是不可见的。（这里不做演示）

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.3.11 多行文本输入框

基本语法：

<form name=""  action="" method="">
            <textarea name="" cols="" rows="" wrap=""></textarea>
        </form>

属性说明：
在这里插入图片描述

用法例子：

<form name=""  action="" method="">
            <h3>请您填写宝贵意见：</h3>
            <textarea name="info" cols="50" rows="4" wrap="virtual"></textarea>
            <!--将文本区内的可见宽度设置为设置为50，可见行数设置为4-->
        </form>

网页展示：
初始化界面：
在这里插入图片描述
------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.3.12 下拉列表框

基本语法：

<form name=""  action="" method="">
            <select name=" " size=" " multiple>
                <option value="" selected>文字信息</option>
                <option value="" selected></option>
            </select>
</form>

属性说明：
在这里插入图片描述
用法例子：

<form name=""  action="" method="">
            <h3>请选择您的课程：</h3>
            <select name="course" size="4" multiple>
                <option value="c1" selected>C/C++程序设计</option>
                <option value="c2" selected>计算机网络</option>
                <option value="c3" selected>数据结构</option>
                <option value="c4" selected>Java程序设计</option>
                <option value="c5" selected>计算机组成原理</option>
            </select>
        </form>

1.3.13 input补充类型

Input类型——Date Pickers（日期选择器）
date——选择日、月、年。
month——选取月、年。
week——选取周和年。
time——选择时间（小时和分钟）
datetime——选取时间、日、月、年（UTC时间）。
datetime-local——选择时间、日、月、年（本地时间）。

input类型：color

<input type="color" name="favcolor"> <!-- 从取色器拾取颜色 -->

input类型：tel

<input type="tel" name="usrtel">

input类型：email

email类型用于包含e-mail地址的输入域。在提交表单时，会自动验证email域的值是否合法有效。

<input type="email" name="useremail"> <!--自动验证邮箱格式-->

input类型：number
number类型用于包含数值的输入域。

<input type="number" name="mynumber" min="1" max="100">

input类型：range
range类型用于包含一定范围内数字值的输入域。range类型显示为滑动条

<input type="range" name="age" min="0" max="200" step="5">

input类型：search
search类型用于搜索域，

<input type="search" name=" ">

input类型：url
url类型用于包含URL地址的输入域。在提交表单时，会自动验证url域的值。

<input type="url" name=" ">

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1.4 form使用补充（细节补充，优化用户使用体验）

细节补充1：

<form action="">
	<input type="radio" name="man" >男
</form>

这种写法交互性不够好因为只能点击按钮才能被选中，点击字”男“的时候则无反应。
若想达到点字的时候，同时这个按钮被选中的效果。
可以在input里面设置id的值，且用label包裹着文字”男“，并且for的值要跟input里面id的值要设置一样的。具体如下

<form action="">
	<input type="radio" name="man" id="mansex"><label for="mansex">男</label>
</form>

细节补充2：

<form action="">
	请输入部门：<input type="text" id="bumen">
</form>

同理这种写法，当在网页上点击”请输入部门：“时候，光标不会聚集到对应的文本框中。
若想达到当鼠标点击文字时，光标自动聚集到相应的文本输入框中，则：
同理可以用label标签包裹着”请输入部门“，且label里面for的值跟input里面id的值要设置成一样的。
具体如下：

<form action="">
	<label for="bumen">
            请输入部门：<input type="text" id="bumen">
     </label>
</form>

细节补充3：
以上介绍的所有的表单标记（元素）都应在以<form>开头，以</form>结尾的标记里，比如介绍的提交按钮（submit）、重置按钮（reset）等
比如：
1、若如提交按钮（submit）在form标记外，以及不给name设值，是达不到向后台传递数据功能的。
2、若如重置按钮（reset）在form标记外，是达不到清楚网页中对应文本框中的内容的。
3、其他如单行文本框（text），复选按钮（checkbox）、单选按钮（radio）都应在form标记里
使用例子代码如下：

<form action="">
        <label for="bumen">
            请输入部门：<input type="text" id="bumen">
        </label>
        <label for="bumen">
            姓名<input type="text" id="name"><br>  <!--   <br>为换行标记     -->
        </label>
        请选择您的性别：
        <input type="radio" name="man" id="sex"><label for="mansex">男</label>
        <input type="radio" name="woman" id="sex"><label for="mansex">女</label><br>
        <input type="submit" value="提交">
        <input type="reset" value="清除所有内容">
    </form>

细节补充4：
input 如何在css里面进行修饰呢？如单行文本框（text）、密码输入框（password）等

input{
    width:200px;  /*将输入文本框的宽度设置为200px*/
    height:50px;  /*将输入文本框的高度设置为50px*/
}

如何对input里的按钮进行修饰呢？如提交按钮（submit），重置按钮（reset）等

input [type='submit']{
	width:100px;  /*将提交按钮的宽度设置为100px*/
    height:50px;  /*将提交按钮的高度设置为50px*/
    color:white;  /*将提交按钮里的字设置为白色*/
    background-color：black;  /*将提交按钮的背景颜色设置为黑色*/
    
    /*对按钮的修饰还很多：如border-radius、box-shadow等*/
}

其他的可以跟这个雷同

杨不旧

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
【HTML5】表单&表单元素（持续更新中.....）

表单概述什么是表单Web网页在的表单一般用来做网络调查、用户在线注册、信息检索及网站服务提供商向用户采集信息等。表单是较为复杂的HTML元素，经常与脚本、动态网页、后台数据处理等结合在一起使用，是设计动态网页的必备元素。利用表单可以在HTML页面中插入一些表单控件（元素），如文本框、提交按钮、重置按钮、单选按钮、复选框、下拉列表框等，完成各类信息的采集。表单标记表单标记：form标记，以<form>开始，以</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被
复制链接

扫一扫