HTML学习总结基础篇表单的使用

最新推荐文章于 2023-03-02 15:04:32 发布

Ace_bb

最新推荐文章于 2023-03-02 15:04:32 发布

阅读量474

点赞数

分类专栏： HTML、CSS、JS 文章标签： css html html5

本文链接：https://blog.csdn.net/Ace_bb/article/details/104292424

版权

HTML、CSS、JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

表单

表单就是和用户进行交互，有用户输入相应的信息。表单的目的就是收集用户信息。
一个完整的表单由表单域，表单控件和提示信息三个部分组成

表单域

表单域表示一个包含表单元素的区域。
在HTML标签中，< form> 标签用于定义表单域,以实现用户信息的收集和传递。
< form>会把它收集到的表单元素信息提交给服务器.
语法格式：
< form action=“ur1地址” method=“提交方式” name=“表单域名称”>
各种表单元素控件
</ form>

常用属性:

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post.
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域。

示例代码：

<body>
    <form action="index04.html" method="post" name="name1">

    </form>
</body>

表单控件 (表单元素) 重点

表单元素就是允许用户
这些表单元素就是允许用户在表单中输入或者选择的内容控件。

< input> 表单元素

在英文单词中, input是输入的意思,而在表单元素中< input>标签用于收集用户信息。
在 < input>标签中，包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本
字段、复选框、掩码后的文本控件、单选按钮、按钮等).
< input type=“属性值” />
< input/>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本) .
checkbox	定义复选框。
file	定义输入字段和“浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮
reset	定义重置按钮。重按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。

示例代码：

<body>
    <!--action设置为点击提交后跳转到的页面，method是信息获取方式-->
    <form action="index04.html" method="get">
        <!--name和value是每个表单元素都有的属性值主要给后台人员使用.-->
        <!--text 就是文本框 用户可以在里面输入任何文字-->
        <!--maxlength设定可以输入的最大长度-->
         用户名： <input type="text" name="username" value="请输入用户名" maxlength="5"> <br>
        <!--password用于输入密码，会自动隐藏密码-->
         密码：<input type="password" name="pwd"><br>
        <!--单选按钮和多选框可以设置checked属性，设定按钮默认选中的按钮-->
        <!--radio是单元按钮，可以实现多选一-->
        <!--性别按钮要实现多选一，必须设置相同的name属性-->
         性别：男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女"><br>
        <!--checkbox 是复选框，实现多选-->
        <!--复选框按钮也要使name属性统一-->
        爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭" checked="checked"> 睡觉 <input type="checkbox" name="hobby" value="睡觉">
              打游戏 <input type="checkbox" name="hobby" value="打游戏">
        <!--submit是提交按钮。提交信息。 不设置value时默认为提交。 value设置按钮上显示的文字-->
        <input type="submit" value="注册">
        <br>
        <!--重置按钮可以还原表单元素初始的默认状态-->
        <input type="reset" value="重新填写">
        <!--普通按钮button-->
        <input type="button" value="登录">
        <br>
        <!--文件域 使用场景 上传文件使用的-->
        上传头像： <input type="file">
    </form>
</body>

label标签

标签为input元素定义标注(标签)。
标签用于绑定-个表单元素当点击标签内的文本时,浏览器就会自动将焦点(光标转到或者
选择对应的表单元素上用来增加用户体验.

<body>
    <label for="text">用户名</label> <input type="text" id="text">
     性别：<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
           <input type="radio" id="nv" name="sex"> <label for="nv">女</label>
    </form>
</body>

下拉表单

使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用< select>标签控件定义下拉列表。
< select>
< option>选项1< /option>
< option选项2< /option>
< option>选项3< /option>
…
< /select>

示例代码：

<body>
    <form>
        籍贯：
        <select>
            <option>北京</option>
            <!--selected设置默认显示的内容-->
            <option selected="selected">上海</option>
            <option>青岛</option>
            <option>福建</option>
        </select>
    </form>
</body>

textarea文本域元素

当用户要输入的内容比较多时，可以设定一个文本域让用户输入
语法规范：
< textarea rows= “3” cols=“20”>
文本内容
< /textarea>
1.通过< textarea>标签可以轻松地创建多行文本输入框。
2. cols= “每行中的字符数”, rows=“显示的行数”, 实际开发中用CSS控制
示例代码：

<body>
    <form>
        意见：
        <textarea cols="10" rows="5">

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

Ace_bb

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习总结基础篇表单的使用

表单表单就是和用户进行交互，有用户输入相应的信息。表单的目的就是收集用户信息。一个完整的表单由表单域，表单控件和提示信息三个部分组成表单域表单域表示一个包含表单元素的区域。在HTML标签中，< form> 标签用于定义表单域,以实现用户信息的收集和传递。< form>会把它收集到的表单元素信息提交给服务器.语法格式：< form action=“ur1...
复制链接

扫一扫