`
Riddick
  • 浏览: 640090 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

HTML form包含的元素

阅读更多

 

HTML form elements

Object HTML tag type property Description and events
Button <input type="button"> or <button type="button"> "button" A push button; onclick
Checkbox <input type="checkbox"> "checkbox" A toggle button without radio-button behavior; onclick
FileUpload <input type="file"> "file" An input filed for entering the name of a file to upload to the web server; onchange
Hidden <input type="hidden"> "hidden" Data submitted with the form but not visible to the user; no event handlers
Option <option> none A single item within a Select object; event handlers are no the select object, not on individual Option objects
Password <input type="password"> "password" An input filed for password entry--typed characters are not visible; onchange
Radio <input type="radio"> "radio" A toggle button with radio-button behavior--only on selected at a time; onclick
Reset <input type="reset"> or <button type="reset"> "reset" A push button that resets a form; onclick
Select <select> "select-one" A list or drop-down menu from which one item may be selected; onchange
Select <select multiple> "select-multiple" A list from which multiple items may be selected; onchange
Submit <input type="submit"> or <button type="submit"> "submit"

A push button that submits a form; onclick

Text <input type="text"> "text" A single-line text entry field; onchange
Textarea <textarea> "textarea" A multiline text entry filed; onchange

 

An HTML form containing all form elements

<form name="everything">                   <!-- A one-of-everything HTML form... -->

 <table border="border" cellpadding="5">   <!-- in a big HTML table -->

   <tr>

     <td>Username:<br>[1]<input type="text" name="username" size="15"></td>

     <td>Password:<br>[2]<input type="password" name="password" size="15"></td>

     <td rowspan="4">Input Events[3]<br>

       <textarea name="textarea" rows="20" cols="28"></textarea></td>

     <td rowspan="4" align="center" valign="center">

       [9]<input type="button" value="Clear" name="clearbutton"><br>

       [10]<input type="submit" name="submitbutton" value="Submit"><br>

       [11]<input type="reset" name="resetbutton" value="Reset"></td></tr>

   <tr>

     <td colspan="2">

       Filename: [4]<input type="file" name="file" size="15"></td></tr>

   <tr>

     <td>My Computer Peripherals:<br>

       [5]<input type="checkbox" name="peripherals" value="modem">56K Modem<br>

       [5]<input type="checkbox" name="peripherals" value="printer">Printer<br>

       [5]<input type="checkbox" name="peripherals" value="tape">Tape Backup</td>

     <td>My Web Browser:<br>

       [6]<input type="radio" name="browser" value="nn">Netscape<br>

       [6]<input type="radio" name="browser" value="ie">Internet Explorer<br>

       [6]<input type="radio" name="browser" value="other">Other</td></tr>

   <tr>

     <td>My Hobbies:[7]<br>

       <select multiple="multiple" name="hobbies" size="4">

         <option value="programming">Hacking JavaScript

         <option value="surfing">Surfing the Web

         <option value="caffeine">Drinking Coffee

         <option value="annoying">Annoying my Friends

       </select></td>

     <td align="center" valign="center">My Favorite Color:<br>[8]

       <select name="color">

         <option value="red">Red        <option value="green">Green

         <option value="blue">Blue      <option value="white">White

         <option value="violet">Violet  <option value="peach">Peach

       </select></td></tr>

 </table>

</form>



<div align="center">        <!-- Another table--the key to the one above -->

  <table border="4" bgcolor="pink" cellspacing="1" cellpadding="4">

    <tr>

      <td align="center"><b>Form Elements</b></td>

      <td>[1] Text</td>  <td>[2] Password</td>  <td>[3] Textarea</td>

      <td>[4] FileUpload</td> <td>[5] Checkbox</td></tr>

    <tr>

      <td>[6] Radio</td>  <td>[7] Select (list)</td>

      <td>[8] Select (menu)</td>  <td>[9] Button</td>

      <td>[10] Submit</td>  <td>[11] Reset</td></tr>

  </table>

</div>



<script>

// This generic function appends details of an event to the big Textarea

// element in the form above. It is called from various event handlers.

function report(element, event) {

    var elmtname = element.name;

    if ((element.type == "select-one") || (element.type == "select-multiple")){

        value = " ";

        for(var i = 0; i < element.options.length; i++)

            if (element.options[i].selected) 

                value += element.options[i].value + " ";

    }

    else if (element.type == "textarea") value = "...";

    else value = element.value;

    var msg = event + ": " + elmtname + ' (' + value + ')\n';

    var t = element.form.textarea;

    t.value = t.value + msg;

}



// This function adds a bunch of event handlers to every element in a form.

// It doesn't bother checking to see if the element supports the event handler,

// it just adds them all. Note that the event handlers call report(  ) above.

// Note that we're defining event handlers by assigning functions to the

// properties of JavaScript objects rather than by assigning strings to

// the attributes of HTML elements.

function addhandlers(f) {

    // Loop through all the elements in the form

    for(var i = 0; i < f.elements.length; i++) {

        var e = f.elements[i];

        e.onclick = function(  ) { report(this, 'Click'); }

        e.onchange = function(  ) { report(this, 'Change'); }

        e.onfocus = function(  ) { report(this, 'Focus'); }

        e.onblur = function(  ) { report(this, 'Blur'); }

        e.onselect = function(  ) { report(this, 'Select'); }

    }



    // Define some special-case event handlers for the three buttons:

    f.clearbutton.onclick = function(  ) {

        this.form.textarea.value=''; report(this,'Click');

    }

    f.submitbutton.onclick = function (  ) {

        report(this, 'Click'); return false;

    }

    f.resetbutton.onclick = function(  ) {

        this.form.reset(  ); report(this, 'Click'); return false;

    }

}

// Finally, activate our form by adding all possible event handlers!

addhandlers(document.everything);

</script> 
分享到:
评论

相关推荐

    jsp+servlet做的form表单元素的提交

    创建一个简单的JSP页面,我们可以定义一个&lt;form&gt;元素,包含各种表单元素如文本框(textbox),下拉列表(select),复选框(checkbox),单选按钮(radio)等。例如: ```jsp &lt;%@ page language="java" contentType="text/...

    c#控制htmlformc#控制htmlform

    HTMLForm是网页上的一个关键元素,它允许用户填写信息并提交到服务器进行处理。 在ASP.NET Web Forms框架中,HTMLForm(通常以&lt;asp:Form&gt;标记表示)与C#代码紧密相连。当用户点击表单上的按钮时,表单会发送POST...

    美观又功能齐全的HTML form表单

    `&lt;form&gt;`标签定义了一个表单区域,它包含了一系列的输入控件,如`&lt;input&gt;`、`&lt;select&gt;`、`&lt;textarea&gt;`等。这些控件允许用户输入数据,然后通过`&lt;form&gt;`的`action`属性指定的URL提交给服务器处理。 例如,一个简单的...

    html对应的文件中 将form 表单数据 转化为json 格式

    在HTML页面中,表单(`form`)是用于收集用户输入数据的元素,而JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于前后端数据传输。本篇将详细介绍如何在HTML表单中收集数据,并利用jQuery的`...

    js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    第二种方法则是利用HTML5提供的新特性,通过直接在HTML元素上设置formaction属性来避免参数冲突。开发者应根据所支持的浏览器版本和具体需求来选择合适的方法。在实际开发中,正确地对URL中的特殊字符进行编码是非常...

    HTML核心元素

    2. **HTML根元素(&lt;html&gt;)**:整个HTML文档的父级元素,包含整个文档的内容。 3. **头部元素()**:头部元素包含了页面的元数据,如字符编码()、标题()、样式表链接()以及JavaScript文件引用等。 4. **...

    html5+css3实现酷炫的form表单

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能强大且视觉效果丰富的form表单提供了无限可能。在本教程中,我们将探讨如何利用这两者的优势来设计和实现酷炫的form表单。 首先,HTML5引入了新的表单元素...

    HTML5(软件品牌)-1期 14 教学课件_单元5_HTML5的form元素及属性.pdf

    在HTML5中,form元素及其相关属性是关键组成部分,它们帮助开发者构建更加灵活和智能的表单。 首先,`&lt;datalist&gt;`元素是一个重要的新特性,它允许开发者定义输入域的预设选项列表。例如,当用户在输入框中输入信息...

    关于HTML的Form的get和post

    HTML的Form是网页中用于收集用户输入数据的重要元素,它提供了两种主要的提交方式:GET和POST。这两种方法在处理用户交互和数据传输时有着不同的特性和用途。 **GET方法** GET方法是最常见的一种提交方式,它将表单...

    form表单的异步回调方法

    1. **表单提交(Form Submission)**:HTML表单通过`&lt;form&gt;`元素定义,其中包含`&lt;input&gt;`、`&lt;select&gt;`、`&lt;textarea&gt;`等元素来获取用户输入。默认情况下,表单提交会引发页面重定向,使用`&lt;form&gt;`的`action`属性指定...

    Customer HTML Form

    - 压缩包中的`nmg-Form`可能包含一个示例HTML表单文件,可能还包含了相关的CSS样式文件和JavaScript脚本来增强表单的功能和外观。 - 用户可以查看这些文件以学习如何构建和定制自己的HTML表单。 - 可能包括了处理...

    JavaScript/HTML—FORM用户输入/提交数据的图形界面

    在`select.html`这个文件中,很可能是展示了一个包含`&lt;select&gt;`元素的例子。`&lt;select&gt;`元素用于创建下拉列表,选项通过`&lt;option&gt;`标签定义: ```html &lt;option value="option1"&gt;Option 1 &lt;option value="option2"&gt;...

    HTML的基础资料(table,form,frame,csst)

    在HTML中,`&lt;table&gt;`、`&lt;form&gt;`、`&lt;frame&gt;`和CSS(Cascading Style Sheets)是构建动态和交互式网页的重要元素。让我们深入探讨这些概念: 1. **表格(Table)**: `&lt;table&gt;`标签用于创建表格,这是组织数据的有效...

    039 漂亮的登录界面 单页form表单【html登录注册页面代码】

    在本资源中,"039 漂亮的登录界面 单页form表单【html登录注册页面代码】" 提供了一个简单的HTML登录界面设计示例,它使用了单页(Single-Page Application, SPA)的概念,并结合了HTML、CSS技术来创建一个吸引人的...

    使用FormValidation进行表单验证

    `FormValidation.zip`可能包含了示例项目的源代码,而`FormValidation_demo`可能是预览这些示例的运行结果。 总之,`FormValidation`是实现高效、美观表单验证的理想选择,结合`jQuery`的便利性和`Bootstrap`的样式...

    Form报名表单html模板下载_报名表 表单_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar

    该压缩包文件包含一个名为"Form报名表单html模板下载_报名表 表单"的HTML模板,主要用于创建在线报名表单。这个模板是专为网页设计和开发人员设计的,它结合了HTML、CSS以及JavaScript技术,以实现对不同设备的...

    Form的HTML

    在探讨“Form的HTML”这一主题时,我们深入解析了HTML表单(form)的基本结构、元素及其功能,这是网页设计中不可或缺的一部分,用于收集用户输入的信息。以下是对form及其相关HTML元素的详细解读: ### 表单(form)...

    漂亮的form表单-漂亮的form表单

    HTML中的`&lt;form&gt;`标签用于定义表单,可以包含各种输入控件,如文本框、密码框、复选框、单选按钮、下拉菜单等。例如: ```html &lt;form action="submit.php" method="post"&gt; 用户名: ...

    Laravel开发-formbuilder

    FormBuilder 包通常提供了友好的 API,让开发者可以快速构建表单元素,如输入框、选择框、按钮等,并且可以自动化处理表单的验证逻辑。 ### 1. FormBuilder 的安装与配置 首先,你需要通过 Composer 来安装这个包...

Global site tag (gtag.js) - Google Analytics