zoukankan      html  css  js  c++  java
  • 创建表单以及表单元素的使用

    创建表单

    其基本语法

    <form action="url" method=get|post>
    <input type=submit> <input type=reset>
    </form>

    其中应用的属性

    action=url:定义提交表单的格式,可以是url或者电子邮件地

    method=get|post:指明提交表单HTTP的方法

    &nbsp;在网页中提供一个空格

    text:定义单行文本输入框

    Password:定义密码

    rows:属性定义多行文本框的高度,单位是单个字符宽度  

    cols:属性定义多行文本框的宽度,单位是单个字符宽度

    textarea:定义一个多行文本输入框

     Checkbox:定义复选框

     Radio:定义单选按钮

     Image:定义图片按钮

     Submit:定义提交按钮

     reset:定义重置按钮

    附:

    <!doctype html>

    <html>

     <head>

      <meta charset="UTF-8">

      <title>学习表单</title>

     </head>

     <body>

    建立用户名称和用户密码的表单

    <form action=url method=POST>

    用户名称:

    <input type=text name=姓名><br>

    用户密码:

    <input type=password name=密码><br>

    </form>

    <br><br><br>

    定义用户提交和重置的按钮

    <form method=Post><br>

    <input type=submit>&nbsp;<input type=reset>

    </form>

    <br><br><br>

    创建多选按钮

    <form method=post >

    <input type=checkbox name=1>

            red<p>

    <input type=checkbox name=2>

            blue<p>

    <input type=checkbox name=3>

            Orange<p>

    <input type=submit>&nbsp;<input type=reset>

    </form>

    创建单选按钮

    <form method=post>

    <input type=radio name=1 value="color1">

            red<p>

    <input type=radio name=1 value="color3">

            BLUE<p>

    <input type=radio name=1 value="color2">

            Orange<p>

    <input type=submit>&nbsp;<input type=reset>

    </form>

    建立一个多行文本输入框

    <form>

    留言板:

    <textarea name=liuyanban rows=5 cols=60>

    </textarea>

    <P>

    <input type=submit>&nbsp;<input type=reset>

    </form>

    对于很长的行是否进行换行的设置

    <form >

    留言板:<br>

    <textarea wrap=soft name=liuyanban rows=5 cols=25> </textarea><P>

    <input type=submit>&nbsp;<input type=reset>

    </form>

     下拉列表select的使用(1)

     <form>

    <select name=color>

            <option>blue

            <option>red

            <option>Orange

    </select><p>

    <input type=submit>&nbsp;<input type=reset>

    </form>

    下拉列表select的使用(2)

    <form>

    <select name=color size=3>

            <option>blue

            <option>red

            <option>Orange

    </select><p>

    <input type=submit>&nbsp;<input type=reset>

    </form>

    下拉列表select的使用(3)

    <form>

     <select name=color size=4 multiple>

            <option>blue

            <option>red

            <option>Orange

                        <option>blue

            <option>red

            <option>Orange

    </select><p>

    <input type=submit>&nbsp;<input type=reset>

    </form>

    请输入你的电子邮箱地址:(带判断@)<br>

    <input type=email name=user_email/><br>

    <input type=submit value=提交><br>

    </form>

    <form>

    <br/>

    提交购买商品的生产日期:

    <br>

    <input type="date" name="user_date" />

    </form>

     </body>

    </html>

  • 相关阅读:
    java代码 分解EXCEL(一)
    hdu 1226 BFS + bfs记录路径
    MVC-MODEL
    弱类型、强类型、动态类型、静态类型语言的区别是什么?
    Objective-C中的命名前缀说明
    self & this 上下文
    Object comparison
    Dynamic typing 动态类型
    iOS支付宝 9.x 版本首页效果
    Using an Image for the Layer’s Content
  • 原文地址:https://www.cnblogs.com/miffees/p/5979201.html
Copyright © 2011-2022 走看看