精华内容
下载资源
问答
  • 只要是表单元素,其值已经不会再用value来定义了,但是placeholder还是可以用来设置默认值。 section1--input:type="text" type="text"不要在标签上定义value值(因为vue已经处理了),要用v-model="current...

    只要是表单元素,其值已经不会再用value来定义了,但是placeholder还是可以用来设置默认值。

    section1--input:type="text"

       type="text"不要在标签上定义value值(因为vue已经处理了),要用v-model="currentValue" 

            data:{currentValue:"xxx"}

            <input type="text" v-model="currentValue"/>  

            // input显示结果: xxx

     section2--radio:

        type="radio"的选中状态不是根据checked来选中的,而是在data中定义一个属性,且让属性的值等于value的值,就会被选中了。(反过来,如果选中了,则v-model = value)        

                data:{currentValue:"red"}

                point: 以下两个radio 用同一个v-model="currentValue"表明是同一组。

                <input type="radio" v-model="currentValue" value="red"/>  

                <input type="radio" v-model="currentValue" value="green"/>  

                // value= currentValue 的值后,rodio就会选中,其他的radio都不会选中。

    使用v-bind:

    <input type="radio" v-model="pick" v-bind:value="a">
    // 当选中时
    vm.pick === vm.a

    section3--textarea:

                    与type=text差不多一样

    section4--checkbox:

                point 1:通过预设一个boolean值来控制多选,当我们点击时,vue会根据v-model设定的true false对应取反,过程我们看不见的。

                e.g:这是一种不设置value属性的用法 ,其实checkbox原生应用中也是可以设置value的

                         data:{checked :true}     //这里的checked是boolean

                        <input type="checkbox" id="checkbox" v-model="checked">

                        <label for="checkbox">{{ checked }}</label>

               point 2:click后checked的值vue会自动取反。

                more exercise:设置checkbox中的value值,点击后通过v-model就会把value添加到数组上,value不设置就是null.

                

                记得上面的value一定要设置,否则是null。

                data:{toggle:true(可为任意值)}

                point3--checkbox中的true-value = "yes2"自带属性 ,当用户点击的时候,vm.toggle === yes2

    <input
    type="checkbox"
    v-model="toggle"
    true-value="yes2"
    false-value="no2"

                section5--select:

                有两种:1是普通的data中定义的属性用string类,即:v-model="'string'",2.多选的要在元素上加一个multiple属性,v-model="[]",其它的都跟原生用法差不多。

                e.g:    

                data:{ selected:[] }        

          <select v-model="selected" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
          </select>
          <span>Selected: {{ selected }}</span>
            result:

               ctrl + 左击:会将所有option的text添加到selected数组中。

                select 原生使用:

        <select>
        <option value ="volvo">Volvo</option>
        </select>
                  ///使用v-bind:///

                    <select v-model="selected">

                            <option v-bind:value="{mname:'tcc'}"></option>

                      </select>             

                则:vm.selected = {mname:'tcc'}

                       vm.selected .mname = "tcc"
    ---------------------
    作者:tangchangcai.
    来源:CSDN
    原文:https://blog.csdn.net/tangcc110/article/details/80181401
    版权声明:本文为博主原创文章,转载请附上博文链接!

    转载于:https://www.cnblogs.com/itgezhu/p/10947403.html

    展开全文
  • 表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。使用form标签定义1234"Url" method="get"> 用户名:"text" name="username" /> 密码:...

    7a3178e57aa4f7c0d53c8d481df7f1d2.png

    什么是表单?

    • 表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。

    • 使用form标签定义

      1234
      "Url" method="get">      用户名:"text" name="username" />      密码:"text" name="password" />

    input

    input标签的类型有很多种,以下是一些常见的类型

    • password

    • button

    • checkbox

    • radio

    • file

    • hidden

    • reset

    • submit

    • color

    • date

    1234567891011121314151617181920212223242526
    "value" value="" placeholder="请输入user">"password" placeholder="请输入密码">"checkbox" name="xq" value="1" checked>"radio" name="sex" value="1" checked>"submit" value="提交">"button" value="注册"/>"button" value="确定">"reset" value="重置" />"hidden" name="six" value="six">"file">"date" value="2017-11-15">"color" value="#ff0000">
    12345678
    "basketball">篮球"radio" name="hobby" value="basketball" id="basketball"  />"football">足球"radio" name="hobby" value="football" id="football"  />

    textarea

    123
    "3" cols="30" style="resize: none">	你们学到了嘛,关于表单的知识

    select

    1234567
    "size" size="3">    "1">s    "2">m    "3">xl  	"3">xxl
    展开全文
  • HTML表单

    2021-04-15 20:12:43
    表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form> 来设置 多数情况下被用到的表单标签是输入标签(<...

    HTML中的表单:
    表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
    表单使用表单标签 <form> 来设置
    多数情况下被用到的表单标签是输入标签<input>。输入类型是由类型属性type定义的。
    大多数经常被用到的输入类型如下:
    文本域1(Text Fields
    文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
    举例代码如下:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>文本域示例</title> 
    </head>
    <body>
    
    <form action="">
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    </form>
    
    <p><b>注意:</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>
    
    </body>
    </html>
    

    以上代码运行结果如下图所示:
    在这里插入图片描述

    文本域2

    <textarea rows="10" cols="30">
    这是一个文本框区域。
    </textarea>
    

    以上是关于开发文本域的示例代码,其中 rows="10"cols="30"是该框的尺寸大小。
    示例代码运行结果如下:
    在这里插入图片描述
    (---------------------------------------分割线---------------------------------------)

    (---------------------------------------分割线---------------------------------------)

    密码字段
    密码字段通过标签<input type="password"> 来定义
    举例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>密码字段示例</title>
    </head>
    
    <body>
        <form action="">
            Username:<input type="text" name="user"><br> Password:
            <input type="password" name="password">
        </form>
        <p><b>注意:</b>密码字段中的字符是隐藏的(显示为星号或者圆圈)。</p>
    </body>
    
    </html>
    

    以上代码运行结果如下图:
    在这里插入图片描述
    (---------------------------------------分割线---------------------------------------)

    单选按钮(Radio Buttons
    <input type="radio"> 标签定义了表单单选框选项
    举例代码如下:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>单选按钮示例</title> 
    </head>
    <body>
    
    <form action="">
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
    </form>
    
    <p><b>注意:</b>当用户点击一个单选按钮时,它就会被选中,其他同类型的单选按钮就不会被选中。</p>
    
    </body>
    </html>
    

    以上代码运行结果如下:
    在这里插入图片描述
    (---------------------------------------分割线---------------------------------------)

    复选框(Checkboxes)
    <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
    举例代码如下:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>复选框示例</title> 
    </head>
    <body>
    
    <form action="">
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car 
    </form>
    
    </body>
    </html>
    

    以上代码运行结果如下:
    在这里插入图片描述
    (---------------------------------------分割线---------------------------------------)
    提交按钮(Submit Button)
    <input type="submit"> 定义了提交按钮。
    当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
    举例代码如下:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>演示提交按钮</title> 
    </head>
    <body>
    
    <form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
    </form>
    
    </body>
    </html>
    

    以上代码运行结果如图所示:
    在这里插入图片描述
    (---------------------------------------分割线---------------------------------------)

    简单的下拉按钮
    option value="volvo" 定义了下拉列表,当用户将鼠标点击该框的时候,会出现下拉选项。
    举例代码如下:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>下拉列表举例</title> 
    </head>
    <body>
    
    <form action="">
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>
    </form>
    
    </body>
    </html>
    

    以上代码运行结果如图所示:
    在这里插入图片描述
    (---------------------------------------分割线---------------------------------------)

    单个按钮:
    <input type="button" value=" "> 定义了单个按钮,其中value=" "里面填的是按钮框里所显示的内容
    举例代码如下:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>单个按钮示例</title> 
    </head>
    <body><form action="">
    <input type="button" value="Hello world!">
    </form></body>
    </html>
    

    以上代码运行结果如下:
    在这里插入图片描述

    展开全文
  • Java开发过程,很多人会遇到在修改信息之前,获取原有数据信息到表单时,有些信息获取不到,比如某系统一个用户想修改自己的个人信息,这个信息列表就包含选择select标签,选中radio标签,文本域textarea标签等。...

    Java开发过程中,很多人会遇到在修改信息之前,获取原有数据信息到表单时,有些信息获取不到,比如某系统一个用户想修改自己的个人信息,这个信息列表中就包含选择select标签,选中radio标签,文本域textarea标签等。因为不是像input等这种标签,可以在标签内部定义value属性。所以接下来,集中的说下碰到这几种标签怎么办,仅仅提供思路!如有问题,可以私信我!我看到会及时回复!

    1js动态设置select中option选中

    function setSelectChecked(){  
        var select=document.getElementById("Type");
            var
    typeValue = document.getElementById("type").value;
            for(var i=0; i<select.options.length; i++){  
                if(select.options[i].innerHTML ==
    typeValue){  
                    select.options[i].selected = true;  
                    break;  
                }  
            }  
        }

    2js如何设置radio选中

    function setRadioChecked(){  
        var radioValue=document.getElementById("state").value;
        if(radioValue=="生效"){
        $("#stateon").attr("checked","checked");  
        $("#stateoff").removeAttr("checked");
        }else{
        $("#stateoff").attr("checked","checked");  
        $("#stateon").removeAttr("checked");
        }

    }


    3js中给textarea赋值

    function setTextContent(){
        var
    remarkValue=document.getElementById("Remark").value;
        document.getElementById("Remark").value="";
        document.getElementById("remark").innerText=
    remarkValue;
    }

    Remark是获取值的id;remark是textarea的id。

    以上这三种方法代码简洁精辟!很不错!

    展开全文
  • 在制作表单页面的时候,如果页面有很多表单,我就不愿意单独定义一个input样式 然后每个input text下都去调用这个CSS().我觉得这样每个input引用css的做法不理想,而且也太麻烦了.我习惯定义一个总的input样式。如...
  • 表单

    2021-01-22 12:24:39
    标签用于定义表单域,实现用户信息的收集和传递。 <form>会把它范围内的表单元素信息提交给服务器 表单空间(表单元素) input输入表单元素 select下拉表单元素 textarea 文本域元素 <input type=...
  • <input type="text"> 定义供文本输入的单行输入字段 ... 定义提交表单数据至表单处理程序的按钮 <input type="radio"> 定义单选按钮 <input type="checkbox"> 定义复选框 <i...
  • struts2表单标签都是以s标签的方式定义的,同时,struts2为所有标签都提供了一个模板,C:\Users\180172\Desktop\struts2-core-2.2.1.1.jar\template\的三个文件夹共同提供模板。struts2模板的制作使用了...
  • 一、问题描述文件上传下载时,在form表单中设置属性enctype=“multipart/form-data”的情况下,如何获取表单提交的有关用户信息的值?(比如:textfield、radio等属性中的值)二、解决方法1、情况一:没有对user对象...
  • 表单

    2021-02-02 20:37:27
    表单域是一个包含元素的区域,form标签用于定义表单域 用于实现用户的信息 收集 传递。 form会把它范围信息提交给服务器。 input是输入的意思 而在表单元素 用户收集用户信息;...radio 定义单选按钮;
  • HTML表单

    2019-10-21 14:18:21
    表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 来设置: . input 元素 . HTML 表单 - 输入元素 多数情况下被用到的...
  • html 表单

    2017-11-20 14:03:56
    1、input元素是最重要的表单元素,text文本,number数字,date日期,radio单选框,checkbox复选框,password密码,submit提交是input最常用的type类型。使用方法如下: type="radio" name="sex" value=...
  • layui表单

    2019-12-13 23:55:05
    在一个容器设定 class=“layui-form” 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。 注意: 依赖加载模块:form (请注意:如果不...
  • 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 来设置,多数情况下被用到的表单标签是输入标签()。 输入类型是由...
  • H5表单

    2019-11-19 13:22:31
    HTML表单 text 以常规文本输入 ...textarea 多行文本域 ...radio 定义单选按钮输入(选择多个选择之一 file select 下拉列表 button 可点击按钮 submit 定义提交按钮(提交表单) reset H5 表单: email,url,date,we...
  • 表单标签

    2020-09-13 17:11:40
    input的属性 radio如果是一组,后面的name必须一致 Lable标签 绑定一个表单元素,当点击lable标签的时候,被绑定的元素会获得输入焦点 ...·在option中定义selected=”selected”设置为默认选项 ...
  • html表单

    2018-08-21 18:37:10
    表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 &lt;form&gt; 来设置: &lt;form&gt; input 元素 &...
  • HTML 表单制作

    千次阅读 多人点赞 2019-09-19 20:36:11
    表单元素是允许用户在表单中输入内容, 比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等 表单使用表单标签 来设置 HTML 表单-输入元素 多数情况下被用到的表单标签是输入...
  • 一、登录表单 有的时候用户需要填写信息,然后把填写完的信息交给服务器。把数据提交给服务器的动作就需要一个新的知识点:表单。 (1)常见的表单控件 ... radio定义单选按钮。 checkbox:...
  • HTML表单简介

    2021-01-17 22:07:42
    表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 来设置 多数情况下被用到的表单标签是输入标签()。 输入类型是由...
  • # HTML 表单

    2018-09-28 23:02:11
    表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 form标签来设置: 多数情况下被用到的表单标签是输入标签 input标签 ...
  • 表单原件

    2015-08-12 09:43:00
    form有type的属性,可以定义不同类型的表单 text 文本输入列 radio单选框 checkbox复选框 password密码框 submit/reset 提交和清除的按钮 button 普通按钮 hidden 隐藏栏 textatea 标签 是大量文本输入...
  • 表单与表格

    2018-08-23 19:45:33
    form 元素定义 HTML 表单:而表单中最重要的元素便是 input input 元素有很多形态,根据不同的 type 属性,例如: 文本 text 单选按钮 radio 提交按钮 submit submit中 action 用于指定 method 属性规定在...
  • 创建表单

    2018-04-17 17:00:17
    标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。密码字段密码字段通过标签&lt;input type="password"&gt; 来定义:单选按钮(Radio Buttons)&lt;input type="...
  • HTML制作表单

    2020-12-04 21:53:17
    表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 (例如下图)。 # 二、HTML 表单 - 输入元素 多数情况下被用到的表单标签是输入标签...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 168
精华内容 67
关键字:

表单中定义radio