zoukankan      html  css  js  c++  java
  • HTML表单页面的运用

    本章目标:掌握表单基本结构<form>

    掌握各种表单元素
    能理解post和get两种提交方式的区别

    本章重点:掌握各种表单元素

    本章难点:post和get两种提交方式的区别

    一、    HTML表单

    表单:

    表单是一个能够包含表单元素的区域。

    表单元素是能够让用户在表单中输入信息的元素(比如文本框,密码框,下拉菜单,单选框,复选框等等)。

    表单是用<form>元素定义的:

    Input:

    最常用的表单标签是<input>标签。Input的类型用type属性指定。最常用的input类型解释如下:


    文本框:在表单中,文本框用来让用户输入字母、数字等等。

    单选按钮:当需要用户从有限个选项中选择一个时,使用单选按钮。

    注意,各选项中只能选取一个。

    复选框:当需要用户从有限个选项中选择一个或多个时,使用复选框。

    表单的action属性和提交按钮:当用户点击提交按钮的时候,表单的内容会被提交到其他文件。表单的action属性定义了所要提交到的目的文件,该目的文件收到信息后通常进行相关的处理。

    如果在上面这个文本框中输入一些字符,按下提交按钮以后,输入的字符将被提交到页面“action.asp”。

    更多示例:

    简单的下拉列表:

    <html>

    <body>

    <form>

    <select name="cars">

    <option value="volvo">Volvo

    <option value="saab">Saab

    <option value="fiat">Fiat

    <option value="audi">Audi

    </select>

    </form>

    </body>

    </html>

    这个例子说明了在HTML页面如何创建下拉列表。下拉列表是可以选择的列表。

    预选的下拉列表:

    <html>

    <body>

    <form>

    <select name="cars">

    <option value="volvo">Volvo

    <option value="saab">Saab

    <option value="fiat" selected>Fiat

    <option value="audi">Audi

    </select>

    </form>

    </body>

    </html>

    这个例子说明了如何创建一个含有预先选定元素的下拉列表。

    文本域:

    <html>

    <body>

    <p>

    This example demonstrates a text-area.

    </p>

    <textarea rows="10" cols="30">

    The cat was playing in the garden.

    </textarea>

    </body>

    </html>

    这个例子说明了如何创建文本域(多行文本),用户可以在其中输入文本。在文本域中,字符个数不受限制。

    创建按钮:

    <html>

    <body>

    <form>

    <input type="button" value="Hello world!">

    </form>

    </body>

    </html>

    这个例子说明了如何创建按钮。按钮上的文字可以自己定义。

    数据周围的标题边框:

    <html>

    <body>

    <fieldset>

    <legend>

    Health information:

    </legend>

    <form>

    Height<input type="text" size="3">

    Weight<input type="text" size="3">

    </form>

    </fieldset>

    <p>

    If there is no border around the input form, your browser is too old.

    </p>

    </body>

    </html>

    这个例子说明了如何在数据周围画带有标题的边框。

    从表单发送电子邮件:

    <html>

    <body>

    <form action="MAILTO:someone@w3schools.com"  method="post"

    enctype="text/plain">

    <h3>This form sends an e-mail to W3Schools.</h3>

    Name:<br>

    <input type="text" name="name" value="yourname" size="20">

    <br>

    Mail:<br>

    <input type="text" name="mail" value="yourmail" size="20">

    <br>

    Comment:<br>

    <input type="text" name="comment" value="yourcomment" size="40">

    <br><br>

    <input type="submit" value="Send">

    <input type="reset" value="Reset">

    </form>

    </body>

    </html>

    这个例子说明了如何从一个表单发送电子邮件

  • 相关阅读:
    SQL注入: with rollup特性
    【转】kali配置--修改IP和DNS
    【转】getopt模块,实现获取命令行参数
    socket编程: TypeError: must be bytes or buffer, not str
    Ansible进阶之企业级应用
    Ansible之Playbook详解
    Ansible之常用模块介绍
    JAVA企业级应用Tomcat实战
    ubuntu网络、包管理、工作内容小结
    shell细节决定高度
  • 原文地址:https://www.cnblogs.com/borter/p/9439899.html
Copyright © 2011-2022 走看看