HTML---表单详解

最新推荐文章于 2024-05-04 15:43:14 发布

菜到极致就是渣

最新推荐文章于 2024-05-04 15:43:14 发布

阅读量3.7k

点赞数 9

分类专栏： Web前端技术文章标签： html 前端 java

本文链接：https://blog.csdn.net/gaoqiandr/article/details/127912016

版权

Web前端技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一、表单介绍

表单分为三个部分，表单域、表单元素、提示信息。

表单域的标签是：

<form> 
    表单内容
</form>

对于表单最经典的例子就是在注册网页中遇到的情况，整个注册页面就是表单域，其中提示你输入的是用户名还是密码还是其它的什么就是提示信息。剩下的选择情况就属于表单元素了。表单三个部分中的表单域和提示信息很好理解，本文不做过多的解释，本文着重讲解表单元素。

二、表单元素

1：input输入表单元素

<input>是用户输入，用来收集用户的信息的，在其中包含一个type属性，type属性的不同，决定了输入字段的形式（可以是文本，复选框，按钮等等）。

<input type="属性值">

下面是其中type属性值：

button    定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox  定义复选框（就是可以多选）
file      定义输入字段和浏览按钮，供文件上传
hidden    定义隐藏的输入字段
image     定义图像形式的提交按钮
password  定义密码字段，该字段中的字符被隐藏
radio     定义单选按钮
reset     定义重置按钮，重置按钮会清除表单中的所有数据
submit    定义提交按钮，提交按钮会把表单数据发送到服务器
text      定义单行的输入字段，用户可在其中输入文本，默认宽度是20个字符

当然了<input>还有其它的属性值：

name         定义input元素的名称
value        规定input元素的值
checked      规定input元素首次加载时的初始化
maxlength    规定输入字段中的字符的最大长度

name和value是给我们后台人员看的，单选框想要达到单选的效果，那么它的name都要相等，复选框同样如此。checked属性就是如果页面初始化加载成功出现时你想要页面出现一些默认的选项，只要在对应的选项中checked="checked"即可。maxlength就是控制输入字符的长度。

对于其中有些注意的或者我认为重要的我会讲解（当然大家也可以查阅文档），其他没有讲解的就是没啥细节。

（1） text和password

<!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>Document</title>
</head>

<body>
    <form>
        用户名:<input type="text"><br> 密码:
        <input type="password"><br>
    </form>
</body>

</html>

（2）radio和checkbox

这个就需要用到<input>的其它属性值了

<!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>Document</title>
</head>

<body>
    <form>
        用户名:<input type="text" value="Niubi"><br> 密码:
        <input type="password"><br>
        <br> 男
        <input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex">
        <br> 爱好:
        <input type="checkbox" name="ho" checked="checked">吃饭 &nbsp; <input type="checkbox" name="ho">跳绳 &nbsp; <input type="checkbox" name="ho" checked="checked">上课
    </form>
</body>

</html>

（3）button

button按钮就是按钮以启动脚本

<!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>Document</title>
</head>

<body>
    <form>
        用户名:<input type="text" value="Niubi"><br> 密码:
        <input type="password"><br>
        <br> 男
        <input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex">
        <br> 爱好:
        <input type="checkbox" name="ho" checked="checked">吃饭 &nbsp; <input type="checkbox" name="ho">跳绳 &nbsp; <input type="checkbox" name="ho" checked="checked">上课
        <input type="button" value="点我啊">
    </form>
</body>

</html>

2：label标签

label标签是什么呢？在点击按钮复选框或者其它的什么表单元素时时，万一按钮它们太小点不到，那我点击按钮相对应的文字描述也可以实现相对应的事件。label标签就是要用来做这个的。

    <label for="dd">用户名：</label><input type="text" id="dd">

重点就是<label>标签中的for属性和<input>中的id属性，它们保持一致即可

3：select下拉表单元素

下拉表单元素是什么呢？就是万一选择的选项很多，全部排列出来不美观，这时候就需要它了，用的时候可以拿出来，不需要的时候可以隐藏起来。

<select>

     <option></option>
     <option></option>
     <option selected="selected"></option>    表示该选项默认，外面会展示出
....
</select>

<form>
        地址:
        <select>
            <option>安徽</option>
            <option>浙江</option>
            <option>上海</option>
          </select>
    </form>

4：textarea文本域元素

文本域标签其实和前面的<input>中的type属性值中的text相似，不过却不一样。当你输入的文本很多时，text属性值只能控制范围是一行，而这时候textarea文本域的作用来了。话不多说，直接操作。

<textarea cols="每行中的字符数" rows="显示的行数(注意是隐藏后显示的行数)>

</textarea>

<body>
    <form>
        请输入数据:<textarea cols="2" rows="3">

        </textarea>
    </form>
</body>

菜到极致就是渣

关注

9
点赞
踩
66

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML---表单详解

在前端网页开发中，HTML的基础知识讲解，本文对于用户与网页的交互做出了详细讲解，具体包括用户输入数据，具体点就是用户输入数据的格式，文本，按钮，复选框等等。
复制链接

扫一扫

专栏目录