form表单

最新推荐文章于 2024-05-04 15:43:14 发布
最新推荐文章于 2024-05-04 15:43:14 发布
阅读量213 收藏
点赞数 1
分类专栏： 前端 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34550459/article/details/105575143
版权

Demo 01:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form表单</title>
    <style>

    </style>
</head>

<body>
    <!--表单:用于将本地的数据提交到远程的服务器
        使用form标签创建一个表单
        
        action属性:表单要提交的服务器地址
    -->
    <form action="target.html" target="_blank">

        <!--注意: 
        数据要提交到服务器中,必须要为元素提供一个name属性   
    -->
        <!--文本框 -->
        用户名: <input type="text" name="username"> <br><br>
        <!--密码框 -->
        密码: <input type="password" name="password"><br><br>

        <!--
     单选按钮:
        像这种选择框,必须指定一个value属性,value表示要提交给服务器的数据
        name属性值进行分组

        checked="checked" 键值对设置默认选中项

    -->
        性别: <input type="radio" name="gender" value="male" checked="checked">
        <input type="radio" name="gender" value="female"><br><br>

        <!--复选框 
        value:提交到服务器端的值
    -->
        爱好:
        篮球 <input type="checkbox" name="hobby" value="1" checked="checked">
        足球<input type="checkbox" name="hobby" value="2">
        排球 <input type="checkbox" name="hobby" value="3">
        乒乓球<input type="checkbox" name="hobby" value="4">
        橄榄球 <input type="checkbox" name="hobby" value="5">
        <br><br>
        <!--select:下拉列表
         option子元素:
         selected="selected" 设置默认选中项
            
        -->
        所在城市:
        <select name="currentCity" id="currentCity">
            <option value="0">南京</option>
            <option value="1" selected="selected">苏州</option>
            <option value="2">无锡</option>
            <option value="3">徐州</option>
            <option value="4">扬州</option>
            <option value="5">南通</option>
        </select>
        <br><br>
        自我介绍:
        <textarea name="selfIntroduction" id="selfIntroduction" cols="30" rows="10"></textarea>
        <br><br>
        <!--重置按钮:将表单数据回滚到最初状态 -->
        <input type="reset" value="重置">
        <!--表单提交按钮:触发表单提交 -->
        <input type="submit" value="提交"> 
    </form>
</body>
</html>

Demo 02:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--target属性 -->
    <form action="target.html">
            <!-- value属性可以为text或者password框设置默认值 \
            autocomplete:设置自动补全功能
            on:开启
            off:关闭

            readonly属性:设置元素为只读,数据可以被提交到服务器
            readonly="readonly"(也可以直接添加readonly属性)

            disabled属性:禁用元素,数据不会被提交到服务器

            autofocus属性:设置元素的聚焦
            -->
            <!-- 用户名: <input type="text" name="username" autocomplete="off"><br><br> -->
            用户名: <input type="text" name="username" autocomplete="off"><br><br>
            资历:<input type="text" name="zili" autofocus="autofocus"><br><br>
            <input type="text" name="word" value="youarebest" disabled="disabled"><br><br>
            密码: <input type="password" name="password" value="656565"><br><br>

            <!--普通按钮 -->
             <input type="button" value="按钮">
            <!--重置和提交按钮 -->
            <input type="reset" value="重置">
            <input type="submit" value="提交">

    </form>
</body>
</html>
极客研究者
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
form表单拖拽功能
12-27
本文将深入探讨"form表单拖拽功能"这一主题，结合提供的文件"FormbuildV1.0"，详细解释其背后的技术实现和相关知识点。 首先，我们需要理解HTML表单的基础结构。一个基本的HTML表单通常由`<form>`标签定义，里面...
简单的form表单模板
01-16
本文将深入探讨“简单的form表单模板”及其相关知识点。 首先，我们需要了解HTML中的`<form>`标签。它是创建表单的基础，用于定义用户输入数据的区域。例如： ```html <form action="submit.php" method="post"> ...
form基础表单总结
qq_48113035的博客
03-07 1万+
1.
最全【HTML基础篇002】HTML之form表单超详解_html form表单
最新发布
2401_84187537的博客
05-04 1318
【代码】最全【HTML基础篇002】HTML之form表单超详解_html form表单。
【HTML基础篇002】HTML之form表单超详解
周周の博客小屋
12-17 8430
文章目录 🌄一、form表单是什么 🌄二、form表单的属性 🌄三、input中的各种Type属性值 🌄四、文章目录 🌄一、form表单是什么 🌄二、form表单的属性 🌄三、input中的各种Type属性值 🌄四、标签
HTML常用标签之表单form
weixin_45604020的博客
06-21 8956
表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并且通过标签的提交操作，把采集到的信息提交到服务器端进行处理。
通过button将form表单的数据提交到action层的实例
08-29
通过按钮将 Form 表单数据提交到 Action 层的实例 在 Web 应用程序开发中，提交 Form 表单数据到后台服务器是一个常见的操作。通常情况下，我们会使用 Form 表单的 action 属性来指定提交的路径，但是在某些情况下...
form表单填写进度条
05-08
使用方法: 1.将fort.css和fort.js引用页面 [removed][removed] <link href="fort/fort.css" rel="stylesheet"> 2.将进度条展示div放进页面,最好放在顶部: ...4.在form标签添加class属性: class="form" 即可;
Form表单模拟美化插件特效代码
03-20
【Form表单模拟美化插件特效代码】是一个专注于提升网页中Form表单视觉效果的工具。在网页设计中，表单元素（如输入框、选择框等）的样式通常是浏览器默认的，这往往不能满足设计师对界面美观度的追求。这款插件就是...
form表单详解
热门推荐
JiuMeilove的博客
07-06 4万+
form表单详解form表单属性 表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。 表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。 form表单属性 form支持HTML的全局属性 属性 值 描述 accept MIME_type HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的） accept-charset cha
【HTML基础】form表单属性及常用元素简介
萌萌白白的博客
02-16 2497
本文简单介绍了HTML常用的表单元素form，以及使用form时常用的属性等
Form表单的简单使用
chenmo2001的博客
05-27 3035
Form表单的简单使用 简介 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。表单元素是允许用户在表单中（比如：文本域、下拉框、单选框、复选框等等）输入信息的元素。表单使用表单标签<form>定义。 布局 完成布局的第一步：创建一个新的项目。 第二步：把我们需要的文件引入进去。 主要有这三个： 可通过栅格系统进行布局 Bootstrap提供了一些表单控件样式、布局选项、以及用来创建广泛多样化的表单的自定义组件。 表单控件 1....
＜form＞表单
qq_50646296的博客
05-25 3801
1.form表单 <form>标签是表单是一个框架，其中主要包含<input>,<textarea>,<select>标签 1.1<input>标签 <input>标签首先是一个单标签 <input>标签的格式是<input type="" value="" name="" > ...
form表单的基本使用
凉茶铺的博客
01-02 2980
介绍了form表单，并对其语法进行了演示说明
前端编程之路一一form表单标签（详解），前端事件分发机制收藏这一篇就够了
m0_61549984的博客
03-20 522
select是显示一个下拉列表(drop down list)出来，option是下拉列表中的项目(item)，而option的文本内容(text content)是下拉列表项目中显示到页面上的值，value是真正需要提交到服务端的值。两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。2、name：为文本框命名，以备后台程序ASP 、PHP使用。3、name：为控件命名，以备后台程序 ASP、PHP 使用。当 type=“checkbox” 时，控件为复选框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值