【自学html笔记】使用html创建表单＜input＞标签的使用

input标签，textarea标签创建文本输入区域，还有select配合option创建下拉式表单的使用方法

deidei~~

5343人浏览 · 2023-01-09 00:59:47

deidei~~ · 2023-01-09 00:59:47 发布

简介：本篇文章总结了如何用html语言<input>标签的多种属性创建表单，包括输入框、密码输入框、单选按钮、下拉列表等等。

文章目录

前言
一、input标签
二、textarea标签创立多行文本框
三、select和option创建下拉式表单
四、\<fieldset>和\<legend>标签增强语义性
总结

前言

在前端开发的过程中我们一定少不了接触表单。表单随处可见，比如我们在平时注册一个APP成为新用户的时候，我们就需要在输入框内输入自己的“昵称”、“密码”、“邮箱”，通过下拉列表选择自己的城市地区等等。这些用来接收外界信息的小部件都是由<input>标签来实现的。接下来就让我们来学习input标签，textarea标签创建文本输入区域，还有select配合option创建下拉式表单的使用方法。

一、input标签

1.type不同的取值对应的不同表单类型

首先让我们整理一下不同type值对应的不同表单类型。

input标签type值对应的不同表单
type值	表单类型
text	单行文本框
passworld	密码文本框
button	按钮
reset	重置按钮
image	图像形式的提交按钮
radio	单选按钮
checkbox	复选框
hidden	隐藏字段
file	文件上传

html5版本在原来的基础上又新增了以下基础控件：

html5新增input type属性
type值	表单类型
url	输入url字段
tel	输入电话号码
search	搜索字符串
email	用于输入邮箱地址，如果输入的非邮箱地址，则支持html5的浏览器将认为其不合法
color	颜色选择器，自动调用系统的颜色调节窗口
number	用于输入数字，可人为规定输入的最大和最小值
range	输入精确值不重要的数字
date	用于输入年月日，跳出选择界面供用户选择
month	年月控件
datetime	日期加时间控件

2.input标签的基本控制属性

name属性：给出当前input表单的名字。
value属性：表示该input表单的默认值。
1）当input type=“text”、“password”、"hidden"时，value中的值会成为其输入框的初始值；
2）当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本；
3）当input type=“checkbox”、“radio”、"image"时，定义与输入相关联的值；
注意：input type="checkbox"和input type="radio"中必须设置value属性；value属性无法与input type="file"一通使用。
style属性：为input元素设置简单的CSS样式。
width属性：当input type="image"时，通过width属性控制元素的宽度；
height属性：当input type="image"时，通过height属性控制元素的高度；
maxlength属性：定义input元素中可输入的最长字符数。

3.常见type举例分析

type=“text”:创建单行文本输入框。

<div>
    昵称：<input type="text" name="Name" value="" maxlength="10">
</div>

在使用input创建单行文本输入框的时候，name表示input该输入框的名字，value表示用户在没有输入任何东西的时候，其输入框内默认存在的值，maxlength表示该输入框内最多输入的文字数量。

效果图：
单行输入文本框

type=“password”:创建密码输入框。

<div>
密码：<input type="password" name="Passcode" value="" maxlength="30">
</div>

对于密码输入框的属性特征其实和text差不多，不再赘述。主要的表现区别主要在输入内容之后页面的显示上。众所周知，密码属于一个人的隐私，是需要重点保护的，所以这个组件创建之后长这样：

密码输入框

type=“radio”:创建单选按钮。

<!--对于单选按钮来说，具有相同名字的单选按钮表示同一组，同时只能有一个被选中-->
<!--check标注的单选框是初始默认的选项-->
<div>
    性别: 
    <input type="radio" value="man" name="sex" checked>男  
    <input type="radio" value="women" name="sex">女
</div>

在单选按钮的创建中，value值表示用户选中选项后提交到数据库中的值，name值是该单选按钮控件的名称。对于所有相同name的控件，能且仅能选中其中的一个选项。被标注checked的那一个input为初始默认选中的项，相同name的单选按钮仅能标注一个。
效果图：
在这里插入图片描述

type=“checkbox”:创建复选框。

<!-- 使用label标签把文字和对应的输入框相关联， -->
<!-- 从而用户选择该选项不需要一定得鼠标点在选项上， -->
<!-- 而是可以点在label圈起的文字部分，也可以选择该选项。从而增大了用户的鼠标操作范围。 -->
<div>
    兴趣：
    <input type='checkbox' id="travel" name="travel"> <label for="travel">旅游</label> 
    <input type='checkbox' id="photo" name="photo"><label for="photo">摄影</label> 
    <input type="checkbox" id="draw" name="draw"><label for="draw">绘画</label>
</div>

当input的类型是复选框的时候，用户可以选择多个选项。这边需要单独指出的是对<label>标签的应用。如果不使用label标签，那么用户在选择这个选项的时候，鼠标必须点击到方框才能选上，而如果使用该标签，则可以将label中的内容和对应id的input绑定，用户点到文字便可以选上，大大增加了方便性和舒适性。
效果图：
在这里插入图片描述

type=“file”:文件上传。

     <input type='file'>

效果就是用户可以点击按钮，上传文件。（在点击按钮的时候会自动跳出文件夹让用户选择本地文件上传）
在这里插入图片描述
选择好文件后旁边会显示用户选择的文件是什么。

type=“color”:创建颜色选择器。

  <input type="color">

然后页面上会对应出现这个：电脑自动调用系统的颜色选择器，让用户选择颜色。（默认值为黑色）
在这里插入图片描述

type=“number”:输入数字。

<input type="number" name="number" min="20" max="30" value="23" />

value是一开始的默认值，在该代码中可以指定允许出现的数字的最大值max和最小值min，对应到页面上会出现一个数字选择器，用户可以通过上下箭头在指定范围内调整值的大小。
在这里插入图片描述

type=“date”：输入日期。

<div>
    出生日期：
    <input type="date" min="1990-01-01" max="2022-01-01" />
</div>

可以通过min和max设定日期允许选择的范围。
效果如下图，会出现一个类似日历的东西供用户输入日期：
在这里插入图片描述

二、textarea标签创立多行文本框

语法：

<textarea rows=“行数” cols=“列数”>多行文本框内容</textarea>

<textarea name="introduction" id="introduction" cols="30" rows="10"></textarea>

效果图：
在这里插入图片描述

三、select和option创建下拉式表单

<select>      
    <option value="1" selected="selected">qq.com</option>
    <option value="2">163.com</option>
    <option value="3">tongji.edu.cn</option>
</select>

selected标注默认选中的内容。

四、<fieldset>和<legend>标签增强语义性

根据W3C标准，html5是非常注重代码以及标签的语义性的，因此，在创建表单的时候我们往往要使用<fieldset>和<legend>标签来给她加一个框，从而使得页面看上去更加自成一体，可读性更强。

<!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>
    <!--<link rel="shortcut icon" type="image/x-icon" href="../icon/favicon.ico"/>-->
</head>
<body>
    <div>
        <!-- 使用fieldset和legend标签可以给表格自添边框，从而让表单更加美观 -->
        <fieldset>
            <legend>个人信息</legend>
            昵称：<input type="text" name="Name" value="" maxlength="10"><br/><!--这里的br标签事实上用的是错误的，因为br的语义是用于在p标签内换行-->
            密码：<input type="password" name="Passcode" value="" maxlength="30"><br/>
            邮箱：<input type="email">

            <select>      
                <option value="1" selected="selected">qq.com</option>
                <option value="2">163.com</option>
                <option value="3">tongji.edu.cn</option>
            </select><br/>
            出生日期：<input type="date" min="1990-01-01" max="2022-01-01" /><br>

            <!--对于单选按钮来说，具有相同名字的单选按钮表示同一组，同时只能有一个被选中-->
            <!--check标注的单选框是初始默认的选项-->
            性别: <input type="radio" name="sex" checked>男  <input type="radio" name="sex">女<br>
            <!-- 使用label标签把文字和对应的输入框相关联， -->
            <!-- 从而用户选择该选项不需要一定得鼠标点在选项上， -->
            <!-- 而是可以点在label圈起的文字部分，也可以选择该选项。从而增大了用户的鼠标操作范围。 -->
            兴趣：<input type='checkbox' id="travel" name="travel"> <label for="travel">旅游</label> 
                <input type='checkbox' id="photo"><label for="photo">摄影</label> 
                <input type="checkbox" id="draw"><label for="draw">绘画</label><br>
            个人介绍：<br>
            <textarea name="introduction" id="introduction" cols="30" rows="10"></textarea>
            <br>
            <button>注册</button><br>
            上传个人照片<br>
            <input type='file'>
         </fieldset>
        </div>
     </body>

效果图：
在这里插入图片描述

总结

以上便是我在学习过程中整理的不同表单的创建方式，有input标签，textarea标签创建文本输入区域，还有select配合option创建下拉式表单。参考博客如下所示：
https://blog.csdn.net/wuyxinu/article/details/103515157
如有补充欢迎提出！