精华内容
下载资源
问答
  • HTML表单元素

    2020-11-11 20:17:46
    HTML表单元素 HTML中的表单元素,可以说是整个HTML中最常用也是最重要的部分,里面包含的太多的元素,尔每一个元素中的type类型又有很多种。所以需要大家理清楚区分开来。 第一个当然是我们最常见的 input;其type值...

    HTML表单元素

    HTML中的表单元素,可以说是整个HTML中最常用也是最重要的部分,里面包含的太多的元素,尔每一个元素中的type类型又有很多种。所以需要大家理清楚区分开来。

    第一个当然是我们最常见的 input;其type值超多:

    <input type="text"> 定义供文本输入的单行输入字段
    <input type="password"> 定义密码字段
    <input type="submit"> 定义提交表单数据至表单处理程序的按钮。
    <input type="radio"> 定义单选按钮。
    <input type="checkbox"> 定义复选框。
    <input type="button"> 定义按钮。
    <input type="number"> 用于应该包含数字值的输入字段。
    您能够对数字做出限制。
    
    常用的限制:
    disabled	规定输入字段应该被禁用。
    max	规定输入字段的最大值。
    maxlength	规定输入字段的最大字符数。
    min	规定输入字段的最小值。
    pattern	规定通过其检查输入值的正则表达式。
    readonly	规定输入字段为只读(无法修改)。
    required	规定输入字段是必需的(必需填写)。
    size	规定输入字段的宽度(以字符计)。
    step	规定输入字段的合法数字间隔。
    value	规定输入字段的默认值。
    

    第二个就是我们的select元素(下拉列表)

    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>
    

    selected属性通常用于把首个选项显示为被选选项。

    <option value="fiat" selected>Fiat</option>
    

    第三个:textarea 元素定义多行输入字段(文本域)

    <textarea name="message" rows="10" cols="30">
    The cat was playing in the garden.
    </textarea>
    

    第四个:button元素定义可点击的按钮

    <button type="button" onclick="alert('Hello World!')">Click Me!</button>
    

    html5还新增了几个元素:

    datalist

    keygen

    output

    其中: 元素为 元素规定预定义选项列表。

    用户会在他们输入数据时看到预定义选项的下拉列表。

    元素的 list 属性必须引用 元素的 id 属性。

    <form action="action_page.php">
    <input list="browsers">
    <datalist id="browsers">
       <option value="Internet Explorer">
       <option value="Firefox">
       <option value="Chrome">
       <option value="Opera">
       <option value="Safari">
    </datalist> 
    </form>
    

    好啦!以上就是我们html中的常用表单元素,记住哦是表单元素! 不是input的输入类型 也就是type值!这有很多人搞混乱。。

    展开全文
  • HTML 表单元素

    2019-08-19 21:58:51
    本章描述所有 HTML 表单元素。 <input> 元素 最重要的表单元素是<input>元素。 <input> 元素根据不同的type属性,可以变化为多种形态。 注释:下一章讲解所有 HTML 输入类型。 <select>...

    本章描述所有 HTML 表单元素。

    <input> 元素

    最重要的表单元素是 <input> 元素。

    <input> 元素根据不同的 type 属性,可以变化为多种形态。

    注释:下一章讲解所有 HTML 输入类型。

    <select> 元素(下拉列表)

    <select> 元素定义下拉列表

    实例

    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>

    <option> 元素定义待选择的选项。

    列表通常会把首个选项显示为被选选项。

    您能够通过添加 selected 属性来定义预定义选项。

    实例

    <option value="fiat" selected>Fiat</option>

     

    <textarea> 元素

    <textarea> 元素定义多行输入字段(文本域):

    实例

    <textarea name="message" rows="10" cols="30">
    The cat was playing in the garden.
    </textarea>

    以上 HTML 代码在浏览器中显示为:

    The cat was playing in the garden.

    <button> 元素

    <button> 元素定义可点击的按钮

    实例

    <button type="button" onclick="alert('Hello World!')">Click Me!</button>

    以上 HTML 代码在浏览器中显示为:

    Click Me!

    HTML5 表单元素

    HTML5 增加了如下表单元素:

    • <datalist>
    • <keygen>
    • <output>

    注释:默认地,浏览器不会显示未知元素。新元素不会破坏您的页面。

    HTML5 <datalist> 元素

    <datalist> 元素为 <input> 元素规定预定义选项列表。

    用户会在他们输入数据时看到预定义选项的下拉列表。

    <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

    实例

    通过 <datalist> 设置预定义值的 <input> 元素:

    <form action="action_page.php">
    <input list="browsers">
    <datalist id="browsers">
       <option value="Internet Explorer">
       <option value="Firefox">
       <option value="Chrome">
       <option value="Opera">
       <option value="Safari">
    </datalist> 
    </form>

     

    展开全文
  • html表单元素

    2017-04-24 18:53:00
    感觉表单元素的内容很多,也很杂乱,虽然常用的也就那么几个,但最好还是都了解一下。免得到时候心慌。多一种方法,毕竟也是多一种出路嘛。自己整理了一下子。 1. 表单的作用 收集不同类型的用户的输入 ...

    感觉表单元素的内容很多,也很杂乱,虽然常用的也就那么几个,但最好还是都了解一下。免得到时候心慌。多一种方法,毕竟也是多一种出路嘛。自己整理了一下子。

    1. 表单的作用

    收集不同类型的用户的输入

    表单元素,用form标签所包围

    2. 表单元素

    1)input元素 
    这个元素有很多的属性,根据type的取值的不同 

    text :常规的文本的输入 
    radio:单选按钮 
    submi:提交按钮 
    button:提交按钮 
    password:输入密码 
    checkbox:复选按钮 

    2)select元素 
    这个元素表示的是复选框

    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>

    3)textarea元素 
    这个元素表示的就是文本输入框,定义多行的文本输入域 
    4)button 元素 
    这个元素和input标签的submit和button是存在这差别的,具体的差别呢,我们会在另一个篇幅来介绍的。这个元素也表示表单的提交。 

     (button元素可以嵌套。但是input元素的提交按钮不能够嵌套,如果你想做那种有漂亮的背景的提交按钮,只能够选择button。比如说,图文混排的效果

        <button><img src="">我是按钮,但是我可以插入图片</button> 

        <input type="submit" value="我是按钮,但是我不可以插入图片的"><img src=""> 

      当input表单的type属性为 submit 的时候,是可以直接的讲用户输入的内容提交到你需要处理的页面的,这个时候不需要借用其他的js的操作

       如果你使用 input 的 type 属性为  button 。或者是直接使用button 表单元素的方式的话,是必须要自己添加js的代码。才能完成相应的提交功能的

      )

     

    5)HTML5新增的表单元素

    <datalist>
    <keygen>
    <output>

    以上只是大致的内容,具体请参阅文档 
    http://www.w3school.com.cn/html/html_forms.asp

    转载于:https://www.cnblogs.com/yiyistar/p/6758389.html

    展开全文
  • Html表单元素

    千次阅读 2008-03-15 10:51:00
    Html表单元素 表单元素主要用收集信息。如、textare(文本域)、select(下拉列表框)。 一、元素定义要在表单中显示的控件类型和外观。通服属性主要有:type、id、name、value、disabled、visible。1 button(普通按钮...

     

     

     

     

    Html表单元素

     

    表单元素<form>主要用收集信息。如<input>textare(文本域)select(下拉列表框)
     
    一、<input>元素定义要在表单中显示的控件类型和外观。
    <input>通服属性主要有:typeidnamevaluedisabledvisible

    1  button(普通按钮)
    <input  type="button"/ id="btn" name="btn" value="普通按钮">

     

     

    2 reset(重置按钮)

    <input  type="reset" id="rt" name="rt" value="重置按钮" />

     

     

    3 submit(提交按钮)

    <input type="submit" id="sb" name="sb"  value="提交按钮" />

     

     

    4 checkbox(重置按钮)

        <input type="checkbox" id="chk1" name="chk" value="中国"  checked="checked" />中国

        <input type="checkbox" id="chk2" name="chk" value="美国" />美国

     

     

    5 radion(单选按钮)

        <input type="radio" id="rd1" name="rad" value="" checked="checked" />

        <input type="radio" id="rd2" name="rad" value="" />

     

     

    6 text(文本框)

        <input type="text" id="tt" name="txt" value="输入内容" size="文本框大小" maxlength="允许输入的最大长度"  readonly="readonly"/>

     

     

    7 password(密码框)

        <input type="password" id="pwd" name="pwd" value="" size="文本框大小" maxlength="允许输入的最大长度" readonly="readonly" />

     

     

    8 hidden(隐藏域)

      <input type="hidden" id="hd" name="hd" value=""/>

     

     

    9 file(文件)

    <input  type="file" id="fl" name="file" value="呵呵" size="20" />

     

        

    Input的高级用法

     

    1.取消按钮按下时的虚线框

      在input里添加属性值 hideFocus 或者 HideFocus=true

     

    2.只读文本框内容

        input里添加属性值 readonly

     

    3.防止退后清空的TEXT文档(可把style内容做做为类引用)

      <INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput>

     

    4.ENTER键可以让光标移到下一个输入框

      <input onkeydown="if(event.keyCode==13)event.keyCode=9" >

     

    5.只能为中文(有闪动)

      <input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9">

     

    6.只能为数字(有闪动)

      <input onkeyup="value=value.replace(/[^/d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">

     

    7.只能为数字(无闪动)

      <input style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9" onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false">

     

    8.只能输入英文和数字(有闪动)

      <input onkeyup="value=value.replace(/[/W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">

     

    9.屏蔽输入法

      <input type="text" name="url" style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9">

     

    10. 只能输入 数字,小数点,减号(- 字符(无闪动)

      <input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false">

     

    11. 只能输入两位小数,三位小数(有闪动)

      <input maxlength=9 onkeyup="if(value.match(/^/d{3}$/))value=value.replace(value,parseInt(value/10)) ;value=value.replace(//./d*/./g,'.')" onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 || value.match(/^/d{3}$/) || //./d{3}$/.test(value)) {event.returnValue=false}"

     

     

     

     

    二、<textare>(文本域)创建与单行文本相对的多行文本输入框。
    <textarea id="are" name="are" cols="10" rows="10" disabled="disabled" readonly="readonly" visible="true" ></textarea>

     

     

     

    三、select(下拉列表框)用于显示可供用户选择的下拉列表。

           <select id="sl" name="sl" multiple="multiple" visible="true" disabled="disabled" size="2">

                <option id="op1" value="美国" selected="selected">美国</option>

                <option id="op2" value="中国">中国</option>

                <option id="op3" value="日本">日本</option>

                <option id="op4" value="法国">法国</option>

            </select>

    属性:

    Multiple:允许多选
    size:
    在有多种选项可供用户查看地时,size确定列表中可同时看到的行数。如下图size=3时的效果:


    Selected:设置某选项是否被选中。

    JavaScript
    关于select的主要属性有:
    1 value:
    下拉列列框中,被选中的选项的值.
    2 text:
    位于<option></option>标签中间的文本.
    3 options:
    所有选项组成的一个数组.访问方式:options[0]..options[n-1]

    4 selectedIndex:返回被选择的选项的索引号.0开始.n-1;
    5 length:
    返回下拉列表中选项的个数.

     

    主要方法:
    1 构造方法:     var the_option= new Option(text_value,text_value);

    2 添加一项:    select_obj.add(the_option);
    3
    删除一项:    select_obj.remove(the_option);

     

     

     

    展开全文
  • 北京电子科技职业学院 PAGE 1 HTML表单元素课程教案 知识点一: HTML5表单元素 实验目的 熟悉HTML表单元素的运用 一组织教学内容 1.课前点名 2.简单的复习上节课内容 二分析自学效果 根据学生课前自学微课后完成的...
  • html表单元素格式

    2021-01-18 16:12:57
    html表单元素格式 属性 说明 type 指定元素的类型:text password checkbox radio submit reset file heidden image butto默认为text name 指定表单元素名称 value 元素的初始值 size 指定表单元素的...
  •  1、认识表单 2、认识表单元素 3、表单元素的分类 4、表单元素——文本框 5、表单元素button 6、表单元素——单选、多选 7、表单元素——select 8、表单元素——textarea 9、推荐 1、认识表单  1、在一...
  • HTML表单元素部分

    2018-12-01 02:03:43
    HTML表单元素 &lt; input &gt;元素:最重要的表单元素,可根据不同的type属性变化为不同形态。 例: &lt; input type=“radio” &gt; 定义单选按钮。 &lt;form&gt; &lt;input type=&...
  • HTML 表单HTML表单一个文档的重要做成部分,其可以包含...表单是一个包含表单元素的区域。HTML 表单用于收集不同类型的用户输入。表单元素是允许用户在表单中输入内容。语法格式action=”serverurl”method=”get|po...
  • HTML&...(1)表单元素 (2)表单控件 表单就是从浏览器向服务器传输数据的手段 表单元素: 用来声明数据提交的范围,只有在此元素内的数据可以提交给服务器。 定义表单:使用成对的<form>&l
  • HTML 表单元素有哪些?

    千次阅读 2017-05-19 13:17:15
    本章描述所有 HTML 表单元素。 元素 最重要的表单元素是 元素。 元素根据不同的 type 属性,可以变化为多种形态。 注释:下一章讲解所有 HTML 输入类型。 元素(下拉列表)  元素...
  • 昨天我们学习了《HTML表单元素初识1——零基础自学网页制作》(目录在结尾),大家通过学习对HTML页面中的表单元素的基本写法已经非常熟悉了。同时也学会了通过变换标签中的type属性的值为表单赋予不同的功能,例如...
  • HTML 表单元素的基本样式

    千次阅读 2018-02-22 17:48:53
    表单元素的样式CSS 表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,以及对表单元素进行分组的 fieldset 和 legend 元素。根据功能的不同,input 元素又包括 text...
  • HTML表单元素--input输入类型(1)

    千次阅读 2019-04-25 17:29:58
    HTML表单元素 HTML表单用于搜集不同类型的用户输入。 1.< form >元素:素定义 HTML 表单。其属性有action=“要提交的地址” method=" 提交的方式" 属性值有:get 和 post <form action="" method="post...
  • HTML表单元素–input输入类型(2) 在HTML中,表单元素中的input元素是占很重要的地位的,第一原因是常用,第二是input元素有太多的type值。老的在之前的文章:input输入类型(1)中有讲解;这里主压迫详细介绍HTML5...
  • html表单元素的colspan和rowspan colspan和rowspan这两个属性用于创建特殊的表格。 colspan用来指定单元格横向跨越的列数:colspan就是合并列的,colspan=2的话就是合并两列。 rowspan用来指定单元格...
  • HTML 表单元素(上)

    2017-10-12 17:48:09
    表单元素总汇 表单元素解析 一、表单元素总汇 在HTML5的表单中,提供了各种可供用户输入的表单控件。 元素名称 说明 form 表示HTML表单
  • HTML表单元素基本用法

    2017-05-20 12:50:35
    HTML表单 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio)、复选框(checkboxes)等等。 表单的标签是: 表单的输入元素 -------------------...
  • HTML表单元素分组

    千次阅读 2017-03-16 14:47:17
    转载:http://www.w3cschool.cn/html/html-css-form-fieldset.html HTML fieldset 要将一些元素组合在一起,您可以使用fieldset元素。它具有局部属性:name,form,disabled。 您可以在以下代码中...
  • HTML表单元素常见用法

    2017-01-04 14:12:22
    在最开始做前端开发的过程中,对于表单元素HTML标签的语义化概念很模糊,随着开发经验的不断积累,总结表单元素的使用场景尤为重要。 1.input元素作为复选框 请选择label标签为input元素定义标注,采用label的for...
  • 本篇文章带我们大家,来共同学习一下HTML表单元素及语法。 还是不要死记硬背,而要多用多理解形成记忆性。 大胆尝试 —— 加油!!! <表单元素的基本格式> ...
  • 标签包裹,表单区域中可添加多种表单元素,包括input元素、textarea元素、select元素、button元素和label元素等,需要注意<input>为单标签元素。<form> <input> <textarea></textarea&...
  • HTML表单元素覆盖样式元素问题及其补救之道 日期:2004:2:13 ·来源:中国电脑教育报 作者:俞伟明 查看:[大字体 中字体 小字体]  在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,156
精华内容 5,262
关键字:

html表单元素