首页 > 其他分享 >HTML表单中input标签中的type属性使用

HTML表单中input标签中的type属性使用

时间:2024-09-01 21:50:49浏览次数:12  
标签:标签 表单 选择 HTML 选中 设置 input type 下拉框

 type属性表示表单控件的类型

一,radio,checkbox,date,time,datetime-local,month,week等

        1.radio:单选框

                        单选中一组内容必须设置同一个name名;

                        单选中每一个表单控件必须设置value值,如果不设置,显示on,表示选择了某个选项,但是不知道具体选中的内容(在url地址栏上显示)

        checkbox:多选框

                        多选中一组内容必须设置同一个name名;

                        多选中每一个表单控件必须设置value值,如果不设置,显示on,表示选择了某个选项,但是不知道具体先中的内容(跟单选相似)

<form action="./demo4.html" method="get">
        <div>
            选择性别:
            <input type="radio" name="gender" value="man">男
            <input type="radio" name="gender" value="woman">女
            <input type="radio" name="gender" value="other">不限
        </div>
        <div>
            诗和远方:
            <input type="checkbox" name="city" value="shanghai">上海
            <input type="checkbox" name="city" value="fujian">福建
            <input type="checkbox" name="city" value="yunnan">云南
            <input type="checkbox" name="city" value="guizhou">贵州
            <input type="checkbox" name="city" value="xinjiang">新疆
        </div>
</form>

结果是: 

         2.date:日期

            time:时间

            datetime-local:同时选择日期和时间

            month:月份

            week:一年中的第几周

<form action="./demo4.html" method="get">
        <div>
            选择日期:<input type="date" name="date">
        </div>
        <div>
            选择时间:<input type="time" name="time">
        </div>
        <div>
            日期时间:<input type="datetime-local" name="datetime">
        </div>
        <div>
            选择月份:<input type="month" name="month">
        </div>
        <div>
            一年中的第几周:<input type="week" name="week">
        </div>
</form>

结果: 

二,text,password,email,url,number,color,file,seach,submit,reset等

        1.text:文本框

           password:密码框

           email:邮件

           url:网址

           number:数字框

                数字输入框

                        max 最大值

                        min 最小值

                        step 数字之间的间隔(默认为1)

           color:颜色

           file:文件

           seach:搜索框

          submit:提交按钮

           reset:重置按钮

<form action="./demo4.html" method="get">
        <div>
            用户姓名: <input type="text" name="userName">
        </div>
        <div>
            用户密码: <input type="password" name="userPassword">
        </div>
        <div>
            用户邮箱: <input type="email" name="userEmail">
        </div>
        <div>
            输入网址: <input type="url" name="userUrl">
        </div>
        <div>
            用户体温: <input type="number" name="temperature" max="42" min="34" step="0.1">
        </div>
        <div>
            选择颜色: <input type="color" name="userColor">
        </div>
        <div>
            选择文件: <input type="file" name="userFile">
        </div>
        <div>
            搜索内容: <input type="search" name="searchContent">
        </div>
        <input type="submit">
        <input type="reset">
</form>

结果:

三,文本域和下拉框标签:

        textrarea:文本框

                        cols 文本域的宽度

                        rows 文本域的高度

                        文本域中的默认值设置在开始和结束标签中间

        下拉框:

                        select标签:定义下拉框

                        option标签:定义下拉选项

                        selected属性:设置默认选中某个选项

<form action="./demo4.html" method="get">
        <div>
            用户评价:
            <textarea name="textarea" cols="40" rows="15">这是默认值</textarea>
        </div>
        <div>
            用户身高:
            <select name="heightContent">
                <option value="">请选择身高</option>
                <option value="160">160cm</option>
                <option value="165">165cm</option>
                <option value="170">170cm</option>
                <option value="175">175cm</option>
            </select>
        </div>
</form>

结果:

标签:标签,表单,选择,HTML,选中,设置,input,type,下拉框
From: https://blog.csdn.net/m0_62859066/article/details/141785275

相关文章

  • Python——造物者type( )、元类与抽象基类
    type()函数在Python中,type()函数是一个非常重要的内置函数,它的前因后果和追根溯源可以从以下几个方面来理解:Python中所有的类本质上也是一个对象,一个从类type实例化的对象。使用type()函数对类进行操作时,会返回type本身,即typeistype。一、定义与基本用途定义:type()函数是P......
  • HTML 基础一
    1.什么是HTML?HTML是HypeTextMark-upLanguage的简称,即超文本标记语言,是用于创建网页的标准标记语言。HTML的全称为:HypeTextMark-upLanguage,指的是超文本标记语言。它不是一种编程语言(如java、C语言等),是一种标记语言,是一套标记标签,用来描述网页。标记:就是标......
  • typescript 中type和interface的区别
    在TypeScript中,type和interface都是用来定义类型别名的工具,但它们之间有一些细微的区别。了解这些区别有助于更好地选择何时使用哪一个。相同点类型定义:两者都可以用来定义对象的形状(shape),即指定一个对象应该具有哪些属性、方法及其类型。可选属性:都可以定义可选属性......
  • php htmlspecialchars()、htmlentities()、addslashes() 的区别
    1差别htmlspecialchars()和htmlentities()唯一的差别是对于不认识的编码是否转义。比如,对于西欧编码ISO-8859-1来说,中文字符是“不认识的编码” 2举个例子说明差别2.1转义不认识的编码有差别$str='中文字符';echo"\nhtmlentities会转义:——\n";echohtmlen......
  • Python将HTML转MD
    1.下载hteml2text模块2.代码importosimporthtml2textinput_folder="C:\\Users\\jude\\Desktop\\res\\cnblogs_blog_judes.20240831122513\\judes"#输入文件夹路径output_folder="C:\\Users\\jude\\Desktop\\res\\cnblogs_blog_judes.......
  • HTML和HTML5有什么区别
    HTML(超文本标记语言)是构建网页的基础,而HTML5是HTML的最新版本。虽然HTML和HTML5在许多方面相似,但HTML5引入了许多新的特性和改进,使得网页开发更加高效和功能丰富。一、HTML概述HTML,即超文本标记语言,是构建网页的标准语言。最初版本的HTML简单地定义了网页的结构和内容,包括文......
  • 【Android】根据URI获取文件扩展名或MimeType
    关于安卓中的URI安卓中的URI包含多种格式,可以是文件,可以是媒体库资源,可以是Resource也可以是网络地址,或其它资源标识这里我们主要针对文件来源的URI安卓中通过URI访问文件主要包括三种方式文件路径媒体库资源(背后仍然是文件,但无法直接访问)Resource资源对于这三种不同......
  • 关于正点原子input子系统,驱动中按键中断只检测了上升或下降沿却可以实现连按(EV_REP)的
    问题在学习到Linux内核input子系统时,产生了一个疑惑。可以看到,我们改造按键中断驱动程序(请见keyinputdriver.c(内核驱动代码)),通过检测按键的上升沿和下降沿,在中断处理函数(上半部内)通过mod_timer(&dev->timer,jiffies+msecs_to_jiffies(20))函数启动定时器。在定时器处理函数中上......
  • HTML元素的head、title
    <head>Html文档的头部,包含机器可读的文档相关信息,如文档的标题、脚本和样式表。<head> 主要保存供机器处理的信息,而非人类可读信息。对于人类可见的信息,如顶级标题和列出的作者,请参见 <header> 元素。示例1:<!doctypehtml><htmllang="zh-CN"> <head>   <metacharset="UT......
  • HTML5新特性速查手册:新增标签与属性一览
    前言:网页的相关概念:网址:我们在浏览器中输入的地址。网页:浏览器所呈现的每一个页面。网站:多个网页构成了一个网站。网页的标准:结构:HTML表现:CSS行为:JavaScript一、什么是HTML?HTML(是HyperTextMarkupLanguage的缩写)中文译名:超文本标记语言。各部分理解:......