• 表 单 / HTML


    概念理解

    一个完整的表单由三部分组成:

    表单控件(表单元素)

    提示信息

    表单域

    1)搜索框/网站注册窗口/网站登录窗口

    form---表单域

    action---数据处理网址/表单提交的网址

    method---提交方式(get-方便,传递数据量小,私密性差/post安全性高,传递数据量大,私密性好)

    input---表单项,有很多类型(tupe),设置不同的类型(type)可以实现不同功能

    text---文本框

    textarea---文本域

    submit---提交

    name---表单项收集到的数据名称

    value--表单项的值,显示在文本框中的提示文本

    readonly--只读,文本框中的文字只可读,不可更改

    size---文本框的宽度

    maxlength---最大字符长度

    disabled---禁用

    (2)密码框

    <input type="password" name="***">

    3)单选按钮

    <input type="radio" name="***" value="***">

    例:性别:<input type="radio" name="gender" >男

                        <input type="radio" name="gender" >女

    Radio如果是一组,必须给给它们相同的name,则可多个选中其中一个

    注:

    *单选按钮要求name对应名称一样

    *<lable>标记

    针对单选按钮及双选按钮,点击文字亦可选中,提高用户体验度,在选择单选按钮时,避免只有点中按钮才能选中的状态。

    为input元素定义标注

    作用:用于绑定一个表单元素,当点击label标签的时候,被绑定表单元素就会获得输入焦点(提高用户体验)

    <label>用户名:<input type=“text”></label>----当鼠标点击用户名时,输入光标自动在文本框中出现

    两种写法,配合兼容性问题,二选一:

    1.包含所有内容-------<lable><input type="radio" name="gender" value="femal">女</lable>

    2.部分包含----- <input type="radio" name="gender" value="femal" id="nv"><lable for="nv">女</lable>

    (4)多选按钮(复选框)

    <input type="checkbox" name="***" value="***">

    Checked=checked 默认被选中(必选项)

    5)上传文件

    <input type="file" name="***" >

    6)下拉菜单

    <select name="***">

             <option value="***"></option>(选项内容填写)

    </select>

    7)多行文本

    <textarea rows="每行中的字符数" cols="显示的行数" name="***">

    文本内容

    </textarea>

    8)按钮

    提交按钮:<input type="submit" value="提交"/>               提交功能

    重置按钮:<input type="reset" value="重置"/>          重置内容

    普通按钮:<input type="botton" value="普通"/>                没有功能,可以自定义功能

    图片按钮:<input type="image" src="***"/>               提交功能

  • 相关阅读:
    男人
    获得类的基本信息
    jsoup中selector的用法及作用
    心理学导论 1 心理学在搞什么
    全球最佳50科技站点
    国际专利运营新势力
    关于gridview的那点事。。。
    关于.net的ValidateRequest=false失效
    Sql Server 的DataReader 与 DataSet
    Ubuntu9.10下 php(FastCGI PHPFPM)+Nginx+.........
  • 原文地址:https://www.cnblogs.com/BUBU-Sourire/p/11027329.html
Copyright © 2020-2023  润新知