zoukankan      html  css  js  c++  java
  • form表单中各元素的运用

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>表单</title>
    </head>
    <body>
    <!--


    表单:主要是收集用户的各种类型数据 提交数据请求到服务器
    组成:
    表单元素+表单控件 功能性标签
    1、表单元素
    属性
    action:主要作用是规定表单提交的动作 提到到服务器上处理的URL
    默认值:提交到本页
    method:指表单数据提交的方式
    get 默认值
    数据提交的大小限制 2kb
    显示提交 用户数据可以显示在地址栏
    适用场合:向服务器要数据时
    post
    数据提交的大小不受限制
    隐式提交 提交的数据非专业人士看不见
    适用场合:向服务器提交数据时
    enctype
    表单数据进行编码的方式
    取值
    application/x-www-form-urlencoded 默认值
    multipart/form-data 上传文件时适用
    text/plain
    2、表单控件
    input组元素
    type属性 默认值 text
    属性:
    type
    value 值 要提交到服务器的值
    name 控件名称,服务器端适用,没有做名称,无法提交
    名称 匈牙利命名方式 类型+功能
    disabled 禁用控件 改属性,主要出现在控件中表达禁用 boolean类型的属性
    textarea
    选择框
    其他
    -->
    <form action="#" method="get" enctype="application/x-www-form-urlencoded" >
    账号:
    <!--1.文本框-->
    <input type="text" name="txtId" maxlength="6" readonly disabled="disabled" />
    <br />
    密码:
    <!--2.密码框-->
    <input type="password" name="txtPwd" />
    <br />
    性别:
    <!--3.单选按钮
    想要一组单选按钮有互斥的效果,必须设置他们的name值相同
    checked="checked"默认选项
    <label></label>里面for=id值,点击id值也可以选中按钮
    -->
    <input type="radio" name="sex" value="1" id="boy" checked="checked"/>
    <label for="boy">男</label>
    <input type="radio" name="sex" value="0" id="girl"/>
    <label for="girl">女</label>
    <br />
    兴趣爱好:
    <!--
    4.多选框
    -->
    <input type="checkbox" name="hbi" value="0" id="book" checked="checked"/>
    <label for="book">看书</label>
    <input type="checkbox" name="hbi" value="1" id="chese"/>
    <label for="chese">下棋</label>
    <input type="checkbox" name="hbi" value="2" id="game"/>
    <label for="game">游戏</label>
    <br />
    <!--6.隐藏域
    给程序员看的
    可以将记提交到服务器
    -->
    <input type="hidden" value="" name="" />
    <!--7.文件选择框-->
    <input type="file" name="txtImg" />
    <br />
    <!--8.文本域
    cols 列数
    rows 行数
    -->
    个人签名:
    <textarea name="intr" cols="100" rows="3"></textarea>
    <br />
    籍贯
    <!--
    multiple:这指多选项
    size 显示的选项数量
    -->
    <select name="sel" multiple="multiple">
    <option value="1">湖北</option>
    <option value="2">湖南</option>
    <!--
    selected="selected"
    默认被选中
    -->
    <option value="3" selected="selected">广西</option>
    </select>
    <br />
    <!--5. 按钮
    submit 提交
    button 普通的按钮
    reset 重置
    -->
    <input type="submit" value="提交" />
    <input type="reset" value="归零" />
    <!--执行客户脚本JavaScript:0-->
    <input type="button" value="执行脚本" />
    <button>
    <img src="img/HBuilder.png" width="100px" height="100px"/>
    </button>
    </form>
    </body>
    </html>

  • 相关阅读:
    Java transient 关键字
    Android学习资料收集
    mac 关闭&&显示隐藏文件命令
    Android 学习资源收集
    Android Studio 快捷键
    Volley框架使用笔记
    Jni :三维数组处理方法 ,以整形三维数组为例 C++实现
    Git使用- 基本命令
    Jni 调试 : eclipse + Vs 联合调试
    Java 调用 C++ (Java 调用 dll)康哥手把手教你
  • 原文地址:https://www.cnblogs.com/awei313558147/p/11155655.html
Copyright © 2011-2022 走看看