精华内容
下载资源
问答
  • 常见的表单控件类型
    千次阅读
    2019-03-19 10:26:50

    隐藏域:

    作用:用来收集或发送信息,对于网页的访问者来说,隐藏域是看不见的。当表单被提交的时候,隐藏域就会将信息,如果普通文本框一样将名称(name)和值(value)发送到服务器上。语法示例<input type="hidden" value="25" name="counts" />

    属性说明:1.type="hidden"定义隐藏域 。2.value=“25”隐藏域的默认值,一般由程序动态改变,其他同文本输入框。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<form action=" " method="post" name="myform">
    			隐藏域:<input type="hidden" value="25" name="counts" />
    		</form>
    	</body>
    </html>

    下拉列表框:

    作用:在有限的网页空间内为用户提供多个选项,但每次只能选择一个。如年份、年级等。

    语法示例:<select name ="gradeList"><option value="class1" selected>软件一班</option>  <option value ="class2">软件二班</option>  <option value="class3" >软件三班</option> </select>

    属性说明:1.<option>表示选择项,至少有一个该标签。2.value=“class1” 被选中时该值用于传递给服务器

    3.selected表示该项默认被选中

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<form action="" method="post" name="myform">
    			选择班级:<select name = "gradeList">
    				<option value="class1" selected>软件一班</option>
    				<option value="class2">软件二班</option>
    				<option value="class3">软件三班</option>
    			</select>
    		</form>
    	</body>
    </html>

    多行列表框:

    作用:用户提供多个选项,但每次可选多个。

    语法示例:<select name="gradeList" size="3"  multiple> <option value="class1" selected>软件一班</option>

    <option value = "class2">软件二班</option> <option value="class3">软件三班</option> <option value="class4">软件四班</option> </select>

    属性说明:1.size=“3” 定义显示的列表项,当列表项多于该值时出现滚动条。2.multipe表示一次可选选择多个内容项,选择多项时,按住Ctrl键即可。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<form action="" method="post" name="myform">
    			选择班级:<select name = "gradeList">
    				<option value="class1" selected>软件一班</option>
    				<option value="class2">软件二班</option>
    				<option value="class3">软件三班</option>
    			</select>
    			选择班级:<select name="gradelist" size="3" multiple>
    				<option value="class1" selected>软件一班</option>
    				<option value="class2">软件二班</option>
    				<option value="class3">软件三班</option>
    				<option value="class4">软件四班</option>
    			</select>
    		</form>
    	</body>
    </html>
    

    一般按钮

    作用:一般按钮通常用来和脚本一起工作。

    语法示例:<input type="button" value="一般按钮" name="btnTest" οnclick="javascript:alert('一般按钮测试')" />

    说明:1.type=“button” 定义该标签为一般按钮2.name=“btnTest” 定义按钮的名称。3.value="一般按钮” 定义按钮显示的文本

    4.Onclick表示按钮的事件,用于调用JS写的函数

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<form action="" method="post" name="myform">
    			<input type="button" value="按钮" name="btnTest" Onclick="javascript:alert('一般测试按钮')" />
    		</form>
    	</body>
    </html>

    提交按钮:

    作用:提交按钮用来完成表单的提交工作。

    语法示例:<input type="submit" value="提交按钮" name="btnTest” />

    说明:1.type=“submit” 定义该标签为提交按钮。2.name="btnTest" 定义按钮的名称。3.value="提交按钮" 定义按钮显示的文本

    提交按钮被点击时将当前表单中可提交的信息发送到action指向的服务端

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<form action="" method="post" name="myform">
    			<input type="button" value="按钮" name="btnTest" Onclick="javascript:alert('一般测试按钮')" />
    			<input type="submit" value="提交按钮" name="btnTest" />
    		</form>
    	</body>
    </html>
    

     

    更多相关内容
  • Bootstrap4 表单控件

    2020-12-14 04:04:24
    Bootstrap4 表单控件 Bootstrap4 支持以下表单控件: input textarea checkbox radio select Bootstrap Input Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, ...
  • 其实 django 已经为我们提供了一些可用的表单控件,比如:多选框、单选按钮等,下面就以单选按钮为例: # forms.py from django import forms from .models import MyModel class MyForm(forms.ModelForm): xxx = ...
  • 根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。 Text <span>Message is: {{ message }} <input type="text" v-...
  • 控件类型"/> 表单控件 属性 属性值 描述 type text 单行文本输入框 password 密码输入框 radio 单选按钮 checkbox 复选框 button 普通按钮 submit 提交按钮 reset 重置按钮 image 图像形式的提交按钮 hidden 隐藏域 ...
  • 根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。 2、Checkbox 单个勾选框,逻辑值: 3、多个勾选框,绑定到同一个数组: ...
  • 可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据 [注意]v-model会忽略所有表单元素的value...
  • Bootstrap表单控件的学习使用,供大家参考,具体内容如下 输入框(Input) 最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。 Bootstrap 提供了对所有原生的 HTML5 的 input 类型的...
  • v-model指令:在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: HTML <!DOCTYPE ...
  • 一、输入框input  单行输入框,常见的文本输入框,也就是input的type属性值为text。... 为了让控件在各种表单风格中样式不出错,需要添加类名“.form-control”。 <form role=form> <input type=
  • HTML表单和表单控件

    2021-06-13 13:40:32
    表单标签(掌握)表单目的是...N4{IOTT8NW0KEG8@KDKPM5U.png表单控件:包含了具体的表单功能项,如单行文本输入框,密码输入框,复选框,提交按钮,重置按钮等。提示信息:一个表单中通常还需要包含一些说明性文字,提...

    表单标签(掌握)

    表单目的是为了收集用户信息。

    在网页中,我们也需要跟用户进行交互,收集用户资料,这时就需要表单。

    在HTML中,一个完整的表单通常由表单控件(也叫表单元素),提示信息和表单域3个部分构成。

    cf1d3206be73?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    N4{IOTT8NW0KEG8@KDKPM5U.png

    表单控件:

    包含了具体的表单功能项,如单行文本输入框,密码输入框,复选框,提交按钮,重置按钮等。

    提示信息:

    一个表单中通常还需要包含一些说明性文字,提示用户进行填写与操作。

    表单域:

    它相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过它定义处理 表单数据所用程序的URL地址,以及数据提交到服务器的方法。如果补丁已表单域,表单的数据就无法传送到后台服务器。

    文本框和密码框

    在上面的语法中标签为单标签,type属性为其最基本的属性,取值有多种,用于指定不同的控件类型。除了type属性之外,标签还可以定义很多其它的属性,常用属性下图所示:

    ![%IYOE55Z~8SAYJ5L3(AYY7.jpg

    input(输入)控件

    1.input是个单标签 (br hr img base )

    2.input 可以看做是变色龙,可以通过 type (类型)属性来改变形状

    这是一个文本框

    这是一个密码框

    男 女

    单选框,如果是同一组,我们用相同的name值来实现

    篮球

    默认选中这一项

    inpu按钮组

    搜索: 普通按钮

    提交按钮

    重置按钮

    图像按钮

    上传头像: 文件按钮

    最多字符数与文本值

    最多输入指定字数

    label标签(理解)

    label标签为input标签元素定义标注(标签)

    作用:用于绑定一个表单元素,当点击label标签的时候被绑定的表单元素就会获得输入焦点。

    输入账号:

    当只有一个需要设置的标签时直接用label直接进行包裹input就可以了

    输入账号:

    如果label里面有多个表单,想定位某个,可以通过 for id 的格式来进行

    textarea控件(文本域)

    如果需要输入大量的信息,就要用到<标签。通过textarea控件可以轻松地创建多行文本输入框。

    基本语法:

    (cols和rows不常用)

    文本内容

    cf1d3206be73?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    1$PH5YNH`W31~{0YO{4DRQT.png

    下拉菜单

    使用selet控件定义下拉菜单的基本语法格式如下:

    选项1

    选项

    选项

    注意:

    1.中至少包含一对

    2.在option中定义selected=selected"时,当前项即为默认选中项。

    表单域

    在HTML中,form标签被用于定义表单域,既创建一个表单,以实现用户信息的收集与传递,form中所有的内容都会被 提交给服务器。

    基本语法

    各种表单控件

    常用属性:

    1.Action在表单收集到信息后,需要将信息传递给服务器进行处理,action用于指定接收并处理表单数据的服务器程序的url地址。

    2.method用于设置表单数据的提价方式,其取值为get或post。

    (1.get 速度快但是会显示表单里的内容,不安全不能做密码提交)

    (post 速度慢一些,但是不会显示表单里的内容,安全一些)

    3.name用于指定表单的名称,以区分一个页面中的多个表单。

    注意:每个表单都应该有知己的表单域。

    以上

    展开全文
  • 表单控件详解

    千次阅读 2019-08-02 17:01:28
    表单控件,与用户交互 (2) 服务器端部分 对提交数据的处理 表单 <form></form> 属性: (1) action 作用:定义表单被提交时发生的动作,通常定义服务器处理程序的地址(url路径),默认提交给本页。 ...

    一、 表单

    1. 作用
      (1)提供可以与用户交互的可视化控件
      (2)收集用户信息并提交给服务器
    2. 表单的组成部分
      (1) 前端部分
      表单控件,与用户交互
      (2) 服务器端部分
      对提交数据的处理
    3. 表单 <form></form>
      属性:
      (1) action
      作用:定义表单被提交时发生的动作,通常定义服务器处理程序的地址(url路径),默认提交给本页。
      (2) method
      <1> 作用:指定表单数据的提交方式
      <2>取值:
      a. get(默认值)
      特点:
       明文提交,待提交的数据会显示在地址栏上
       提交数据有大小限制,限制为2KB
       向服务器要数据时使用
      b. Post
      特点:
       提交数据无大小限制
       隐式提交,待提交的数据不会显示在地址栏上
       要传递数据给服务器时使用
      c. delete
      d. put

    (3) enctype
    作用:指定表单数据的编码方式,允许将什么样的数据提交给服务器。
    属性值:
    a.application/x-www-form-urlencode
    默认值,允许将任意字符提交给服务器(文件除外),在发送前编码所有字符
    b.multipart/form-data
    允许将文件提交给服务器,不对字符编码。
    在使用包含文件上传控件的表单时,必须使用该值。
    c.text/plain
    只能提交普通字符,空格转换为 “+” 加号,但不对特殊字符编码。
    4. 表单控件:能与用户进行交互的可视化控件
    (1)控件分类
    a. Input元素
    b. Textarea元素
    c. Select元素
    d. 其他元素
    (2)input元素
    <1>作用:在页面中提供各种输入的控件,如:文本框,密码框,单选按钮,复选框等
    <2> 语法
    标记:<input>或<input/>
    属性:
    a. type 指定输入控件的类型
    b. name 为控件定义名称,提交给服务器端使用
    c. value 控件的值,提交给服务器端使用
    d. disabled 禁用控件,不能操作并且不能提交,该属性无值。
    <3>input的type属性取值:
    a. button ——定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
    b. Checkbox—— 定义复选框。
    c. file ——定义输入字段和 "浏览"按钮,供文件上传。
    d. hidden ——定义隐藏的输入字段。
    e. image ——定义图像形式的提交按钮。
    f. password ——定义密码字段。该字段中的字符被掩码。
    g. radio ——定义单选按钮。
    h. reset ——定义重置按钮。重置按钮会清除表单中的所有数据。
    i. submit ——定义提交按钮。提交按钮会把表单数据发送到服务器。
    j. text ——定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。
    (4) textarea元素
    <1>作用:允许录入多行数据的文本框
    <2>语法:
    标记:<textarea></textarea>
    属性:
    a. name 定义控件名称,提供给服务器用。
    b. readonly 只读,不能改,无值属性。
    c. cols 指定文本域的列数,即一行能显示多少个英文字符(中文减半)。
    d. rows 指定文本域的行数,即默认显示多少行数据,超出rows的话会出现滚动条。
    (5) select元素
    <1>标记:

    <select>//在页面中表示一个选项框
              <option>//选项框中具体的选项内容
              </option>
               <option>//选项框中具体的选项内容
              </option>
    </select>
    

    <2>属性:
    select的属性:
    a. name 定义选项框的名称
    b. size 定义显示选项的数量,默认值为1
    c. multiple 设置多选,无值属性
    option的属性:
    a. value 定义选项的值
    b. selected 设置默认选中项的,无值属性
    (6) 其他元素
    <1>label元素
    作用:关联文本与表单控件
    语法:<label>文本</label>
    属性:for 用于绑定要与label元素关联的表单控件的id值。
    <2>控件分组元素
    标记:

    <fieldset>//为控件分组
             <legend></legend>  //为分组指定标题
    </fieldset> 
    

    ex:

    <fieldset>
    		<legend>标题</legend>
    				 放其它控件
    </fieldset>
    

    <3>浮动框架
    作用:允许在一个网页中,再引入另外一个网页进来。
    标记:<iframe></iframe>
    属性:
    a. src 指定要引入网页的url
    b. width 设置框架的宽度
    c. height 设置高度
    d. frameborder 浮动框架的边框 默认值1
    5.新表单元素
    (1)什么是新表单元素
    在HTML5版本中新提出的控件。
    (2)详解
    <1>电子邮件类型:<input type="email">
    作用:表单提交时,会验证数据是否符合email的规范
    <2>搜索类型:<input type="search">
    作用:提供了快速清除功能
    <3>url类型:<input type="url">
    作用:提交时,验证数据是否符合url的规范(绝对路径)
    <4>数字类型:<input type="number">
    作用:只能接受数字,并且可以灵活调整数字的值
    属性:
    a. value 控件的值
    b. min 能够接收的最小数字值
    c. max 能够接收的最大数字值
    d. step 每次调整数字时数字的变化范围
    <5>电话号码类型:<input type="tel">
    作用:在移动设备中,显示为“拨号键盘”效果
    <6>范围类型:<input type="range">
    作用:提供滑块组件,允许用户选取指定范围的值
    属性:
    a. min:最小值
    b. max:最大值
    c. value:初始值
    d. step:步长
    <7>颜色控件:<input type="color">
    作用:提供一个颜色拾取器
    <8>日期类型:<input type="date">
    作用:提供一个日期控件
    <9>周类型:
    <10>月类型:

    6.示例

    <!doctype html>
    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    	</head>
    
    	<body>
    		<form action="" method="get" enctype="application/x-www-form-urlencode">
    			<fieldset>
    				<legend>学生基本信息</legend>
    				<p>用户名称:<input type="text" name="uname" placeholder="请输入用户名称"></p>
    
    				<p>用户密码:<input type="password" name="upwd" maxlength="6" placeholder="请输入用户密码"></p>
    				<p>
    					用户性别:<input type="radio" name="gender" checked id="man">
    					<label for="man">男</label>
    
    					<input type="radio" id="woman" name="gender">
    					<label for="woman">女</label>
    				</p>
    				<p>出生日期:<input type="date"  name="birthday"/></p>
    				<p>毕业年月:<input type="month" name="month"/></p>
    			</fieldset>
    			<p>
    				用户爱好:<input type="checkbox" name="hobby[]" value="qin">琴
    				<input type="checkbox" value="qi" name="hobby[]" checked>棋
    				<input type="checkbox" name="hobby[]" value="shu">书
    				<input type="checkbox" name="hobby[]" checked value="hua">画
    			</p>
    			<p>
    				<input type="hidden" name="uid" value="10">
    			</p>
    			<p>
    				上传头像:<input type="file">
    			</p>
    			<p>
    				自我介绍:<textarea name="intro" id="" cols="30" rows="6"  value="">这是自我介绍的内容</textarea>
    			</p>
    			<p>
    				工作城市:
    				<select name="city" size="3" id="" multiple>
    					<option value="bj">北京</option>
    					<option value="sh" selected>上海</option>
    					<option value="sz">深圳</option>
    					<option value="xa">西安</option>
    				</select>
    			</p>
    			
    			<input type="submit" value="登录">
    			<input type="reset" value="取消">
    			<input type="button" value="普通按钮">
    		</form>
    	</body>
    
    </html>
    

    效果:效果展示

    展开全文
  • 1.在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。 2.<input>表单元素 ...(2)type属性设置不同的属性值来指定不同的控件类型 <!D.

    1.在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。

    2.<input>表单元素

    在表单元素中,<input>标签用于收集用户信息。

    在<input>标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种方式(可以是文本字段,复选框,掩码后的文本控件,单选按钮,按钮等)。

    (1)<input />标签为单标签

    (2)type属性设置不同的属性值来指定不同的控件类型

     

    <!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>input 表单元素</title>
    </head>
    
    <body>
               <from>
    
                     <!-- text 文本框 用户可以里面输入任何文字 -->
                     用户名:<input type="text">   <br>
    
                     <!-- password 密码框  用户看不见输入的密码 -->
                     密码:<input type="password"> <br>
               </from>    
    </body>
    
    </html>

     

    展开全文
  • html form 表单控件类型

    千次阅读 2015-07-25 07:44:16
    1. 表单元素  表单通常由两类元素构成:一是普通的页面元素,例如表格、图像、...二是用于接收信息的特定页面元素,也就是所谓的表单控件,例如文本框、单选框等。平时所说的表单元素是指表单控件。 2. 表单控件
  • 表单控件合集

    千次阅读 2020-10-26 21:06:33
    ## 表单控件合集 因为前面太执着于自己的想法了,所以学的知识有点跳跃,老师的知识点还没琢磨透彻就想着自学新的东西,所有今天想着有时间整理一下表单控件: 元素定义 HTML 表单: fieldset:标签,组合表单中的...
  • 可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。 Text <span>...
  • HTML表单元素、表单控件

    千次阅读 2020-10-18 15:54:23
    CSS-01 ...表单 表单用于显示、收集信息,并...(2)表单控件 表单就是从浏览器向服务器传输数据的手段 表单元素: 用来声明数据提交的范围,只有在此元素内的数据可以提交给服务器。 定义表单:使用成对的<form>&l
  • CSS-form表单及input表单控件

    千次阅读 2021-06-16 22:31:55
    一、表单 1.认识表单 在HTML中,一个完整的表单通常由表单控件(也被称为表单元素)、提示信息和表单域3个部分构成。... 表单控件 </form> <form>标记的常用属性 属性名 含义
  • 表单控件-日期

    2022-03-15 21:42:46
    in put类型 -Date-pickers (日期选择器) date -选取日,月,年 month -选取月,年 week -选取周和年 time -选取时间 (小时和分钟) datetime -选取时间,日,月,年,(本地时间) 例如:Date:<input ...
  • 主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
  • html表单的13种表单控件

    千次阅读 2019-09-10 13:56:28
    除了input标签外,html还有八个传统表单控件和五个html5新增的表单控件。 二、传统控件 button 定义按钮 select 定义下拉列表 option 定义下拉列表中的选项 optgroup 定义选项组,用于组合选项 textarea 定义多行...
  • 表单和表单控件以及表单域详解

    千次阅读 2019-03-28 13:06:08
    表单控件里面的信息全部收集提交。 表单控件 input表单控件: 1.是个单标签 </input> 2.input可以通过type(类型)属性来变换形状 单选按钮注意: <body> <p>用户名:<input type="text...
  • 常用的一些表单控件

    2019-09-22 01:38:15
    主要属性:action: 当提交表单时,向何处发送表单数据,属性值为一个URL  method:使用什么方式将表单数据发送到action属性所规定的页面(get post)  enctype:表单数据进行编码的方式  name:表单名称2....
  • 按照控件的填写方式分为输入类、菜单列表类 输入类的控件一般以<input>标签开始,说明该控件需要用户的输入 菜单类的控件一般以<select>标签开始,说明该用户需要选择 按照控件的表现形式分为文本类、...
  • form表单标签及控件

    千次阅读 2020-04-02 16:10:37
    一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。 form标签中通常会有很多子元素,用来定义各种交互控件(文本字段、复选框、单选框、提交按钮等等),比如< input>、< ...
  • 表单概述 ...表单控件 包含了具体的表单功能项,例如:单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等 提示信息 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。 ...
  • html学习笔记之一:表单控件

    千次阅读 2017-07-13 16:53:58
    一、表单元素 主要属性 1)action : 属性值是URL,规定当提交表单时应该思想何处提交数据; 2)method :表单数据的提交方式,规定用何种方式将表单数据提交到action属性指定的页面; 3)enctype :表单数据的编码...
  • 它具有:通过 data-* 的方式来来决定表单是否需要验证,验证类型通过 mvalidateExtend 方法提供自定义拓展验证方式不同于其他的表单验证,该控件在用户初次输入的时候(keyup事件)是不进行验证的,这样的方式更符合用户...
  • H5新增表单元素、控件

    千次阅读 2019-09-24 18:51:43
    表单—新增控件类型 • HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下。 • ①email、②url、③number、④range • ⑤Date pickers (date, month, week, time, datetime, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 76,108
精华内容 30,443
热门标签
关键字:

常见的表单控件类型