跟着艾文一起学前端-第5篇-HTML的常用标签（3）- 表单

最新推荐文章于 2023-02-15 19:01:01 发布

爱问的艾文

最新推荐文章于 2023-02-15 19:01:01 发布

阅读量201

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u012764358/article/details/105012259

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

表单介绍

表单主要是用于搜集一系列的用户输入信息，我们可以简单地理解为，就像你在填写一张信息采集表一样，HTML中的表单的作用就是这样一个功能，用于搜集不同类型的用户输入，收集用户录入的信息。

表单标签 -<from>及表单域

被<form>标签包裹起来就是一个表单，它是一个包含表单元素的区域
常用属性：

action 表单信息提交地址
method 提交方式 —get/post，但是表单提交一般用post

表单元素(或者是表单控件)

位于表单标签内，是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

常用的表单元素：

标签名称	解释及用法
<input>	输入类型标签，定义输入域
<textarea>	定义文本域（一个多行的输入控件）
<label>	定义一个可以控制的标签
fieldset	定义域
select	第一个下拉选择列表
option	定义下拉列表中的选项
button	顶一个按钮

input 标签
看字面意思，输入的意思，<input>标签是单标签，它的常用属性如下：

属性	属性值	描述
type	text password radio checkbox button submit reset image file	单行的文本输入框密码输入框单选按钮复选框普通的按钮提交按钮重置按钮带图片的提交按钮选择文件的按钮叫文件域
name	用户自定义	控件的名称，及当前input标签它的名称
value	用户自定义	input控件中默认展示的文字内容
size	正整数	input控件在页面中的宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最大字符数

type 属性的作用是说明input是哪一种输入的形式
type属性的值特殊说明
- radio 单选按钮，既然是选择的肯定不止一个按钮，我们必须要给这一组单选按钮命名相同的name值，否则的话不会被控制为单选，可以通过 checked属性设置默认选中的按钮，CheckBox跟radio是类似的。

textarea 标签
input标签只支持一行文本，如果想要写多行的文本就要使用textarea，textarea是一个双标签。
label 标签
用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就后会获取焦点，绑定通过label的for属性，绑定到表单元素的id值。如下所示

<label for="username"> 我是label点我试一下 </label>
用户名：<input type="text" id="username"/>

select 下拉列表控件
一个选择列表，列表项的值通过option标签来指定如下所示

					<select name="" id="">
                        <option>白羊座</option>
                        <option>金牛座</option>
                        <option>双子座</option>
                        <option>巨蟹座</option>
                        <option>狮子座</option>
                        <option>处女座</option>
                        <option>天秤座</option>
                        <option>天蝎座</option>
                        <option>射手座</option>
                        <option>摩羯座</option>
                        <option>水瓶座</option>
                        <option>双鱼座</option>
                    </select>

实例代码与演示效果

根据上面的表单标签和表单元素，咱们可以做出如下的实例，先看代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>arvin</title>
</head>
<body>
    <h1 >welcom  to  arvin's blog！</h1>
    <form>
        <table border="0" width="600" align="center" cellspacing="0" cellpadding="10">
            <caption><h2>welcom  to  arvin's blog！</h2></caption><!-- caption 标题的意思 标提标签 用来定义一个表格的标题 -->
            <tr>
                <td>姓名</td>
                <td><input type="text"/></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" checked="checked"/> 男
                    <input type="radio" name="sex" /> 女
                </td>
            </tr>
            <tr>
                <td>星座</td>
                <td>
                    <select name="" id="">
                        <option>白羊座</option>
                        <option>金牛座</option>
                        <option>双子座</option>
                        <option>巨蟹座</option>
                        <option>狮子座</option>
                        <option>处女座</option>
                        <option>天秤座</option>
                        <option>天蝎座</option>
                        <option>射手座</option>
                        <option>摩羯座</option>
                        <option>水瓶座</option>
                        <option>双鱼座</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" name="hobby" checked="checked"/>足球
                    <input type="checkbox" name="hobby"/>看书
                    <input type="checkbox" name="hobby"/>唱歌
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td>
                    <select name="" id="">
                        <option>本科</option>
                        <option>硕士</option>
                        <option>博士</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>照片</td>
                <td><input type="file"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" maxlength="16"/></td>
            </tr>
            <tr>
                <td><input type="button" value="普通按钮"/></td>
                <td><input type="submit" value="提交"/></td>
                <td><input type="image" src="images/image_button.jpg"/></td>
            </tr>
        </table>
    </form>
    
</body>
</html>

效果图如下

在这里插入图片描述
因为现在只是在界面的搭建阶段，所以牵扯到数据验证、提交与数据交互上的处理需要等到js学习的时候再回过头来讲解。

爱问的艾文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟着艾文一起学前端-第5篇-HTML的常用标签（3）- 表单

表单介绍表单主要是用于搜集一系列的用户输入信息，我们可以简单地理解为，就像你在填写一张信息采集表一样，HTML中的表单的作用就是这样一个功能，用于搜集不同类型的用户输入，收集用户录入的信息。表单标签 -<from>及表单域被<form>标签包裹起来就是一个表单，它是一个包含表单元素的区域常用属性：action 表单信息提交地址method 提交方式 —...
复制链接

扫一扫