表单(文本框-下拉框-文本域-复选框-单选框)

最新推荐文章于 2024-04-27 17:27:51 发布
最新推荐文章于 2024-04-27 17:27:51 发布
阅读量320 收藏 1
点赞数
分类专栏： Bootstrap 文章标签： 经验分享 bootstrap html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41301428/article/details/121482231
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link rel="stylesheet" type="text/css" href="../static/bootstrap/css/bootstrap.min.css">
</head>
<body>
<!--表单
        1.文本框
            .form-control  表单元素样式
            表单控件的大小   .input-lg    .input-sm
        2.下拉框
            .form-control  表单元素样式
            multiple 多选   multiple="multiple"
        3.文本框
            .form-control  表单元素样式
        4.复选框
            垂直显示 .checkbox
            水平显示 .checkbox-inline
        5.单选框
            垂直显示 .radio
            水平显示 .radio-inline
-->
<div class="container">
    <input type="text"><br>
    <select name="" id="">
        <option value="">请选择城市</option>
        <option value="">上海</option>
        <option value="">北京</option>
    </select><br>
    <textarea name="" id="" cols="30" rows="10"></textarea><br>
    <input type="checkbox" name="hobby">唱歌
    <input type="checkbox" name="hobby">跳舞<br>
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女

    <hr>
    <!--文本框-->
    <div class="row">
        <div class="col-md-4">
            <input type="text" class="form-control"><br>
            <input type="text" class="form-control input-lg"><br>
            <input type="text" class="form-control input-sm"><br>
        </div>
    </div>
    <!--下拉框-->
    <div class="row">
        <div class="col-md-4">
            <!--            multiple 多选   multiple="multiple"-->
            <select class="form-control">
                <option value="">请选择城市</option>
                <option value="">上海</option>
                <option value="">北京</option>
            </select>
        </div>
    </div>
    <!--文本域-->
    <div class="row">
        <div class="col-md-4">
            <textarea class="form-control"></textarea>
        </div>
    </div>
    <!--    复选框-->
    <!--    垂直显示-->
    <div class="row">
        <div class="col-md-4">
            <div class="checkbox">
                <label><input type="checkbox" name="hobby">唱歌</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="hobby">跳舞</label>
            </div>
        </div>
    </div>
    <!--水平显示-->
    <div class="row">
        <div class="col-md-4">
            <label class="checkbox-inline"><input type="checkbox" name="hobby">唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby">跳舞</label>
        </div>
    </div>
</div>

<!--    单选框-->
<!--    垂直显示-->
<div class="row">
    <div class="col-md-4">
        <div class="radio">
            <label><input type="radio" name="hobby">唱歌</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="hobby">跳舞</label>
        </div>
    </div>
</div>
<!--水平显示-->
<div class="row">
    <div class="col-md-4">
        <label class="radio-inline"><input type="radio" name="hobby">唱歌</label>
        <label class="radio-inline"><input type="radio" name="hobby">跳舞</label>
    </div>
</div>

</body>
</html>
脆订壳
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
2019-7-23 [HTML] 表单 文本框 密码框 单选按钮 复选框 执行按钮 多行文本框 特殊输入框 隐藏域 input的placeholder只读 required禁用 [案例：人人网]
景子墨的博客
07-23 890
文章目录0.HTML网页技术(高级)1.表单1.1 什么是表单1.2 表单的重要性1.3 表单编写的基本语法2 常用的表单元素2.1 表单元素概述2.2 文本框 : 用来接收文字输入的2.3 密码框 : 用来接收密文密码的2.4 单选按钮用于在一组选项中选择一个值2.5 复选框用于在一组选项中选择多个值2.6 列表框(常用)用于在一堆选项中选择一个2.7 按钮用于执行页面事件2.8 文本域用于输入...
用jQuery得到form表单里面文本框、密码框、单选框、下拉框、复选框的值
自律给我自由
03-31 1542
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;通过jQuery获取表单的值&lt;/title&gt; &lt;script type="text/javascript" src="jquery-3.2.0.min.js&q
HTML-表单，下拉菜单,文本域
最新发布
Kevin7_35Durant的博客
04-27 613
双标签：select嵌套option,select是下拉菜单整体，option是下拉菜单的每一项。作用：收集用户信息，类似登陆界面，调查问卷，搜索区域。占位文本-提示信息,在文本框和密码框没输入时显示。单标签：单选框是圆圈，多选框是方圈。
下拉框，CheckBox
my博客
09-27 394
取下拉框被选取的值：$("select[name=name]  option[selected]").text();         $("select[name=name]  option[selected]").val();    给下拉框赋值：$("select[name=name]  option[value='aaa']").attr("selected","selected
表单标签：创建表单、input属性、单选按钮、label标签、复选框、密码框、下拉菜单、多行文本框、三个按钮
qq_44935762的博客
07-09 979
创建表单 <form></form>标签：需要两个属性action、method action：表示表单提交到后台程序的网址 method:表示表单提交的方式（有get和post两种方式） 基本控件:input和它的属性 常见的属性有disabled、value、palceholder 单选按钮 radio：name给服务器的信息、value、checked默认选择 label标签： HTML5中单选按钮点击文字也可勾选（将按钮和文字一起包起来） HTML4中的label
wordpress进阶教程(七):自定义面板添加下拉框、选择框等表单项
01-20
并且在自定义面板中可以输入关键词和描述信息，但是我们仅仅使用了一个textarea文本域表单，这在实际应用中是远远不够的，实际应用我们可能需要文本框、文本域、单选框、复选框、下拉选择框、图片上传、甚至是...
django表单中的按钮获取数据的实例分析
12-17
在Django框架中，表单是处理用户输入数据的核心组件，它们通过HTML元素如文本框、密码输入框、单选按钮、复选框、下拉框等收集用户数据。当用户提交表单时，这些数据通常通过HTTP的POST方法发送到服务器。下面将详细...
SpringMVC表单标签知识点详解
08-29
例如，使用标签来定义表单，使用标签来定义输入框，使用标签来定义复选框等。 二、SpringMVC表单标签的类型 SpringMVC表单标签有多种类型，包括： 1. 标签：用于定义表单，指定表单的提交URL和方法等。 2. 标签：...
风越.Net代码生成器 [FireCode Creator] V1.3 精简版
12-12
文本框 文本域 UBB文本框（支持UBB文本输入） 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式： 显示文字 链接文件 文本框 文本域 显示...
风越asp代码生成器 V3.5
11-08
文本框 文本域 UBB文本框（支持UBB文本输入） 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式： 显示文字 链接文件 文本框 文本域 显示...
HTML之表单
辉小歌的博客
10-01 2337
目录文本输入框密码输入框单选按钮（Radio Buttons）复选框（Checkboxes）下拉框 文本输入框 输入你的名字:<input type="text" name=""> <br> 输入你的名字:<input type="text" name="" style="width:200px; height:30px; font-size:15px;" placeholder="辉小歌"> 密码输入框 <form> 密码:<input ty
文本域 自定义下拉框 支持模糊检索 关键字高亮 上下选择
zhengjianhua1996的博客
10-24 830
转载自：文本域 自定义下拉框 支持模糊检索 关键字高亮 上下选择 一、需求 需要创建一个常见问题库，填写存在问题时可以下拉选择，可以模糊搜索，也可以手写。如果选择了问题库中的内容，自动填充内容到存在问题中，并且自动选择严重程度，最终保存的值还是界面显示的内容。 二、可行性研究 1、h5的datalist 可以支持下拉选择，模糊搜索，手写 。经过试验 list属性只能用于input输入框 ...
day02：input、下拉框、文本域、frameset（target、name）、div、css、行内内部外部导入、选择器、字体的样式、文本的样式、背景的样式、边框样式、轮廓样式、列表的样式
m0_45209551的博客
03-16 1727
一 回顾 1.html是超本文标记语言 2.web前端的三剑客:html css js 3.html常用的标签 标题标签 <h1></h1> <h6></h6> 图像:<img src="路径" width="宽度" height="高度" alt="图片加载错误的提示信息" title="鼠标移入的提示信息"> 超链接:<a href="跳转的地址" target="页面打开的方式"></a&g...
HTML 表单，输入框，文本域,＜label＞标签，下拉列表，button按钮
yc_1314的博客
09-08 1176
表单 <form> 是一个表单，里面包含表单元素，例如文本表单，密码表单，单选框，复选框，提交按钮，下拉列表等。 表单<from> <form> 是在最外层，主要向服务器提交数据的功能。 属性 值 说明 accept-charset 字符集 规定服务器处理的表单字符集 action URL 规定表单向何处发送表单数据 autocomplete on或者off 浏览器基于之前键入过的值，应该显示出在字段中填写的选项，实现自动填充 enctype
HTML表单，文本框，密码框，单选框，复选框，提交
热门推荐
love07070707的博客
12-22 1万+
表单的作用是收集用户输入的数据，可以提供实现和服务器进行交互。包含文本框，密码框，单选框，复选框等 下面是表单讲解 类型：type="text"   type="password" 密码框 type="radio" 单选按钮 注意：当type="radio" 时 应该有分组，即name的值应该相同。可以设置默认值，默认值属性是checked=“checked” type=“ch
HTML--表单类的标签
qq_45823118的博客
03-18 3832
HTML--表单类的标签1.表单元素——文本框1.1任务描述1.2相关知识代码文件2.表单元素——文本框2.1任务描述2.2相关知识代码文件3.表单元素——单选框3.1任务描述3.2相关知识代码文件4.表单元素——多选框4.1任务描述4.2相关知识代码文件 1.表单元素——文本框 1.1任务描述 本关任务：创建一个input标签， type类型为text，name属性值为nickName。 效果如下： 1.2相关知识 一般在网站上填写个人信息的时候，会输入姓名、昵称等信息，这里用到的就是<input
Form表单以及各种信息框(文本框，密码框，单选/复选框，下拉列表框)
qq_46343373的博客
08-16 2781
表单的使用 <form action="信息最后提交到的地方" method="get或者post"> <!-- 中间可以写入各种信息框--> </from> 使用案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body>
html+表单+下拉框,HTML+CSS：常用表单控件之单选框、多选框、下拉框的介绍
weixin_33501543的博客
06-04 2436
上一篇文章我们说了单行文本框和多行文本框，今天呢我们继续看一下表单的其它控件：单选框、复选框、下拉框。(1)单选框和复选框在我们表单页面中，经常会有选择性别或者选择爱好这类的内容，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。使用语法：单选框：复选框：详细讲解：1、type: 当 type="...
vue v-model 的使用，绑定表单（文本输入框 单选 复选 文本域 下拉框）
03-30
v-model 是 Vue 中用于实现双向数据绑定的指令，可以将表单元素的值与 Vue 实例中的数据进行绑定，实现表单值的自动更新和数据的自动同步。 下面是使用 v-model 绑定表单元素的示例： 1. 文本输入框： ```html <input type="text" v-model="message"> ``` 2. 单选框： ```html <input type="radio" value="A" v-model="selected"> <input type="radio" value="B" v-model="selected"> ``` 3. 复选框： ```html <input type="checkbox" value="A" v-model="checkedItems"> <input type="checkbox" value="B" v-model="checkedItems"> ``` 4. 文本域： ```html <textarea v-model="message"></textarea> ``` 5. 下拉框： ```html <select v-model="selected"> <option value="A">Option A</option> <option value="B">Option B</option> </select> ``` 在 Vue 实例中，需要定义对应的数据属性来存储表单元素的值，例如： ```javascript new Vue({ data: { message: '', selected: '', checkedItems: [] } }) ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脆订壳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值