zoukankan      html  css  js  c++  java
  • 学习html总结(三)

    form表单

    1.  两个重要属性action和method

    action 表单提交的地址,不填的话默认为自身页面。

    method 表单提交的方式:有get和post。

    a.get通过URL地址栏传参、不安全、所有信息可在地址栏看到、传递数据量有限。
       http://服务器地址?name1=value1&name2=value2;(?表示传递参数,?后面采用name=value的形式传递,多个参数之间用&隔开)
    b.post通过后台传参、安全、传递数据量没有限制。
       使用http请求传递数据,URL地址栏不可见。多使用post传递数据。

    2.  input标签及属性

    a.type:表示input输入框的类型,可选值有:

    text 文本; password 密码,输入内容时显示小黑点; 
    radio 单选框(同一组name必须相同,value不能省,凭借name属性区分是否为同一组,同组只能选一个); checkbox 复选框; 
    file 文件上传; bottom 按钮,没有功能;image 图片提交按钮,功能同submit,可以提交数据;
    submit 提交表单数据;reset 重置按钮,将表单数据重置为初始状态。

    b.name:input输入框的别名,一般情况下必填。因为传递数据时使用name=value的形式传递。


    c.value:input输入框的默认值。


    d.placeholder:input的提示内容,当输入框有value时,提示内容消失。


    3.  input特殊属性值


    a.checked="checked" 默认选中(radio只能选一个,checkbox可以选多个。)


    b.disabled=“disabled” 不能被选中,用在按钮上不能点击,用在输入框上不能修改


    c.hidden=“hidden” 隐藏,等同于<input type="hidden"/>,常用于配合disabled,使用隐藏域传递数据。


    4.下拉选择控件select:


    a.写法:<select>
                  <option></option> (可以有多个)
               </select>


    b.属性:name属性写在<select>上。

    multiple="multiple":设置select为多选,一般不用


    c.option常用属性:

    value:有value时,name=value;没有时,name=option里边包含的值。
    title:鼠标指上后显示的文字。
    selected="selected",默认选中。


    d.doptgroup lable=“”:用于对option标签进行分组,lable为分组名


    5.文本域textarea


    a.写法:<tr>
                   <td colspan="2">
                       <textarea></textarea>
                   </td>
               </tr>


    b.属性:style=“resize:none;” 设置为宽高不允许修改。
    readonly=“readonly” 设置为只读模式,不允许编辑。
    style=" 180px; height: 250px;”设置宽高。
    style=“overflow:;”设置当文字超出区域时,如何处理:
    hidden:超出区域的文字,隐藏无法显示
    scroll:无论多少文字,均会显示滚动
    auto:自动,根据文字多少自动决定是否显示滚动。

     
    复制代码

    <fieldset>
              <legend>用户注册</legend>
            <form action="" method="get" autocomplete="on">
                <table>
                    <tr>
                        <td>用户名:</td>
                        <td><input type="text" name="username" id="username" value="111" /></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><input type="password" name="mima"  placeholder="请输入密码" autofocus="autofocus"/></td>
                        <!--placeholder:提示属性-->
                    </tr>
                    <tr>
                        <td>性别:</td>
                        <td>
                            <input type="radio" name="sex" value="男" />男
                            <input type="radio" name="sex" value="女" />女
                        </td>
                    </tr>
                    <tr>
                        <td>
                            喜欢的城市:
                        </td>
                        <td>
                            <select name="city">
                                <optgroup label="山东">
                                  <option selected="selected">烟台</option>
                                  <option>青岛</option>
                                  <option>济南</option>
                                  <option>济宁</option>
                                </optgroup>
                                <optgroup label="北京">
                                  <option>海淀</option>
                                  <option>朝阳</option>
                                </optgroup>
                            </select>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>爱好:</td>
                        <td>
                            <input type="checkbox" name="hobby" value="玩" checked="checked"/>玩
                            <input type="checkbox" name="hobby" value="吃"/>吃
                        </td>
                    </tr>
                    
                    <tr>
                        <td>头像:</td>
                        <td><input type="file" name="head"/></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="image" src="img/捕获.PNG" value="提交" />
                        </td>
                        <td>
                            <input type="reset" value="重置" />
                            <input type="button" value="点我" />
                        </td>
                    </tr>
                    <tr>
                        <td>服务条款:</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <textarea readonly="readonly" style=" 200px; height: 120px;">这是服务条款;这是服务条款;
                                这是服务条款;这是服务条款;这是服务条款;这是服务条款。</textarea>
                        </td>
                    </tr>
                </table>
            </form>
          </fieldset>
    复制代码
  • 相关阅读:
    洛谷 P2766 最长不下降子序列问【dp+最大流】
    洛谷 P3254 圆桌问题【最大流】
    洛谷 P2764 最小路径覆盖问题【匈牙利算法】
    洛谷 P2763 试题库问题【最大流】
    洛谷 P2762 太空飞行计划问题 【最大权闭合子图+最小割】
    洛谷 P2761 软件补丁问题 【spfa】
    洛谷 P2754 星际转移问题【最大流】
    洛谷 P1251 餐巾计划问题【最小费用最大流】
    spoj 371 Boxes【最小费用最大流】
    poj 3680 Intervals【最小费用最大流】
  • 原文地址:https://www.cnblogs.com/wuqiance/p/11269080.html
Copyright © 2011-2022 走看看