zoukankan      html  css  js  c++  java
  • HTML 表单

    表单

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

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

    表单使用表单标签(<form>)定义。

    <form>
    ...
      input 元素
    ...
    </form>

    输入

    多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

    文本域(Text Fields)

    当用户要在表单中键入字母、数字等内容时,就会用到文本域。

    <form>
    First name: 
    <input type="text" name="firstname" />
    <br />
    Last name: 
    <input type="text" name="lastname" />
    </form>
    

    浏览器显示如下:

    First name:  
    Last name: 

    注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。

    单选按钮(Radio Buttons)

    当用户从若干给定的的选择中选取其一时,就会用到单选框。

    <form>
    <input type="radio" name="sex" value="male" /> Male
    <br />
    <input type="radio" name="sex" value="female" /> Female
    </form>
    

    浏览器显示如下:

     Male 
     Female

    注意,只能从中选取其一。

    复选框(Checkboxes)

    当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。

    <form>
    <input type="checkbox" name="bike" />
    I have a bike
    <br />
    <input type="checkbox" name="car" />
    I have a car
    </form>

    浏览器显示如下:

     I have a bike 
     I have a car

    表单的动作属性(Action)和确认按钮

    当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

    <form name="input" action="html_form_action.asp" method="get">
    Username: 
    <input type="text" name="user" />
    <input type="submit" value="Submit" />
    </form>

    浏览器显示如下:

    Username:  

    假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。

    表单标签

    <form>
      <fieldset>
        <legend>health information</legend>
        height: <input type="text" />
        weight: <input type="text" />
      </fieldset>
    </form>
    标签描述
    <form> 定义供用户输入的表单
    <input> 定义输入域
    <textarea> 定义文本域 (一个多行的输入控件)
    <label> 定义一个控制的标签
    <fieldset> 定义域
    <legend> 定义域的标题
    <select> 定义一个选择列表
    <optgroup> 定义选项组
    <option> 定义下拉列表中的选项
    <button> 定义一个按钮
    <isindex> 已废弃。由 <input> 代替。
  • 相关阅读:
    CodePlus#4 最短路
    最大子矩阵问题———悬线法
    Luogu P3393 逃离僵尸岛
    SCOI2011 糖果
    关于页面的跳转添加参数(比如id啥的)
    npm 常用命令
    移动开发中的一些基本的思想,和需要注意的细节技巧之处
    Mock模拟后台数据接口--再也不用等后端的API啦
    普及知识
    移动端JD首页H5页面
  • 原文地址:https://www.cnblogs.com/james2015/p/4935758.html
Copyright © 2011-2022 走看看