zoukankan      html  css  js  c++  java
  • html--form表单常用操作

    form表单

    用于收集用户信息,如:登录、注册等场景;所有要提交的数据都必须放在form标签中<form action=" "  method=" ">

      action:提交地址、动作,与input标签中typy标签的submit属性相关联。  <input type="submit" value="提交" />,提交地址是action的地址

      method:提交方法,有get和post两种提交方法。

        get方法:提交数据可以再URL中看见,

        例如:(1)以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail传递参数

           (2)URL长度有限制,所以传递的参数数据就有限制

           (3)由于数据可以看见,所以不安全

           (4)网页默认的请求是get

        post方法:   

            1. 将form data 保存在http的请求体
            2. 没有长度限制
            3. 安全的
            4. 往往在开发中用于提交数据form表单提交post
            5. 文件上传 method = post   enctype=multipart/form-data

    input标签:输入框,是表单中最重要的部分

      name:指定名字,因为提交的是键值对,所以必须要指定名字,否则无法提交,即使提交了也没有意义

      value:文本框的内容,一般用在不能输入的类型中,如改变按钮的名字等。

      placeholder:占位内容,通常用于提示: 

    <input type="text" name="emailId" placeholder="输入账号" />

        

      readonly:只读模式,设置后无法修改输入框的内容

      disabled:禁用状态 

    <input type="text" name="emailId" placeholder="输入账号" disabled="disabled"/>   

       size:由于输入框是单行的,所以只能设置宽度

       maxlength:限制输入框最大输入的字符个数

    type属性:

      text:普通文本,标签的默认属性时text ,通常如输入用户名用的是text

      passworld:密文文本,输入的内容不显示。如密码输入框

      submit:提交按钮。上文提到过,要与action一起用。

      radio:单选框,多个关联选项name属性要一致,需要设置value,默认选中用checked设置

         <labke  for=""></lable>:用于关联单选按钮与文字。

    性别:<input type="radio" name="sex" value="0" id="nan"/><label for="nan"></label>
    <input type="radio" name="sex" value="1" id="nv"/><label for="nv"></label><br/>

       CheckBox:复选框,属性与单选框类似

    爱好:<input type="checkbox" name="like" value="sport" id="1"/><label for="1">运动</label>
                <input type="checkbox" name="like" value="music"id="2"/><label for="2">音乐</label>
                <input type="checkbox" name="like" value="song" id="4"/><label for="4">唱歌</label>
                <input type="checkbox" name="like" value="games" id="5"/><label for="5">游戏</label><br/>

       file:文件上传,需要进行配套设置。提交方法需要用post

         hidden:隐藏字段,该字段根普通字段一样,但是不会在页面上显示

    <input type="hidden" name="csrf_hidden" value="hdsuifhudsifhsdoi">

    除了输入框外常用的还有下拉选择框和文本域

      select:下拉选择框 

        属性name需要设置   

           size:可以设置高度(选项个数)

        每个选项都是一个option,必须指定value,默认选中使用属性selected

    籍贯:<select name="from">
             <option value="bj">北京</option>
             <option value="sh">上海</option>
             <option value="gz">广州</option>
             <option value="sz">深圳</option>
          </select><br/>

      textarea:文本域。

        说明:可以输入多行文本

        属性:

          cols:列数(宽度)

          rows:行数(高度)

        注意:不要在标签书写任何多余的内容

    简介:<textarea name="intro" cols="20" rows="5"></textarea><br/>
                <input type="submit" value="注册"><br/>

    例子:

    为了对齐方便使用table表格标签来辅助对齐。

    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body background="timg.jpg">
            <h1>还没有账号?赶紧注册一个吧!</h1>
            <form>
            <table width="500px" heigth="300px" border="0" bordercolor="red" align="center"cellspacing="0" cellpadding="0">
    <tr>
        <td align="right" padding="0">电子邮箱:</td>
        <td align="left" padding><input type="text" name="emil" placeholder="请输入:"/><br/></td>
    </tr>
    <tr>
        <td></td>
        <td>您可以使用<a href="#">邮箱</a>或者<a href="#">手机号</a>注册  <br/></td>
    </tr>
    <tr>
        <td align="right">创建密码:</td>
        <td><input type="password" name="pwd"></td>
    </tr>
    <tr>
        <td align="right">真实姓名:</td>
        <td><input type="text" name="name" placeholder="请输入:"/></td>
    </tr>
    <tr>
        <td align="right">性别:</td>
        <td><input type="radio" name="sex" value="0" id="nan"/><label for="nan"></label>
                      <input type="radio" name="sex" value="1" id="nv"/><label for="nv"></label></td>
    </tr>
    <tr>
        <td align="right">生日:</td>
        <td><input type="date" name="date"/><br/></td>
    </tr>
    <tr>
        <td align="right">我现在:</td>
        <td><input type="radio" name="work" value="school"/>正在上学
                        <input type="radio" name="work" value="worker"/>已经工作
                        <input type="radio" name="work" value="other"/>其他</td>
    </tr>
    <tr>
        <td align="right"> 现居地:</td>
        <td><input type="text" name="address" placeholder="请输入:"/></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="checkbox" name="name" value="agree"/>同意<a href="#">服务条款</a></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="submit" value="立即注册"/></td>
    </tr>
            </table>
            </form>

      

  • 相关阅读:
    常见的HTTP状态码(HTTP Status Code)说明
    eclipse tomcat maven热部署
    log4j.properties 详解与配置步骤
    js玩命加载……
    git学习
    vim学习笔记
    Android中在不同activity中进行自定义广播的解析
    Android中本地广播的实现
    Android中自定义广播的实现
    Android中获得网络状况的实现
  • 原文地址:https://www.cnblogs.com/jiangtao159/p/9820582.html
Copyright © 2011-2022 走看看