day08表单标签、常用表单的属性、文本溢出处理、

day08

表单

表单标签

注册和登录 目的：收集用户信息,能够输入内容

• input标签

  • text

    • 文本输入类型

    • <input type="text" name="username">
      

  • password

    • 密码类型

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

  • radio

    • 单选按钮

    • <input type="radio" name="sex" value="boy">男
      <input type="radio" name="sex" value="girl">女
      

  • checkbox

    • 复选框

    • <input type="checkbox" name="course" value="HTML">HTML
      <input type="checkbox" name="course" value="CSS">CSS
      

  • button

    • 普通按钮

    • <input type="button" value="点我">
      

  • submit

    • 提交按钮

    • <input type="submit" value="提交">
      

  • reset

    • 重置按钮

    • <input type="reset" value="清空">
      

  • file

    • 文件上传

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

  • image

    • 图像形式的提交按钮

    • <input type="image" src="submit.jpg" alt="submit">
      
      

  • hidden

    • 隐藏域

• select

  • 下拉框

  • <select name="area">
        <option value="HTML">html</option>
        <option value="JS">js</option>
        <option value="CSS">css</option>
    </select>
    
    

• textarea

  • 文本域

• label

  • <!-- label的for属性要对应相应表单的id -->
            <input type="radio" name="shenfenzheng" value="zg" id="zg"><label for="zg">中国居民身份证</label>
            <input type="radio" name="shenfenzheng" value="ga" id="ga"><label for="ga">港澳台居民身份证</label>
    
    

常用表单的属性

action

• action属性定义提交表单时执行的动作。通常表单会提交到web服务器网页，如果省略会被提交到当前页面

method

• get

  • 从服务器获取数据, 数据量小， 不安全的
  • get是默认方法

• post

  • 向服务器传递数据，相对安全
  • 数据量大

• checked

  • 应用到单选框，复选框

  • <input type="checkbox" checked>
    
    

• selected

  • 下拉框

  • <select name="area">
        <option value="HTML">html</option>
        <option value="JS" selected>js</option>
        <option value="CSS">css</option>
    </select>
    
    

• value

  • <input type="text" name="name" value="web前端">
    
    

• readonly

  • <input type="text" name="name" value="web前端" readonly>
    
    

• disabled

  • <input type="text" name="name" value="web前端" disabled>
    
    

• maxlength

  • <input type="text" name="name" maxlength="6">
    
    

• size

  • <select name="name" size="3">
    
    

• style=“resize: none;”

  • <!-- resize: none 设置为不能改变尺寸 -->
    <textarea name="" cols="30" rows="10" style="resize: none;"></textarea>
    
    

文本溢出处理

• 单行文本溢出显示省略号

  • white-space

    • normal 默认。空白会被浏览器忽略。
    • pre 空白会被浏览器保留。
    • nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
    • pre-wrap 保留空白符序列，但是正常地进行换行。
    • pre-line 合并空白符序列，但是保留换行符。

  • text-overflow

    • clip 修剪文本。
    • ellipsis 显示省略符号来代表被修剪的文本。
    • [string] 使用给定的字符串来代表被修剪的文本。 目前只在Firefox下有效。

  • p {
        width:200px;	/*限定盒子的宽度*/
        overflow:hidden;	/*给元素设置溢出隐藏属性*/
        text-overflow: ellipsis;	/*文本溢出显示省略号*/
        white-space:nowrap; /* 文本不换行 */
    }
    
    

• 多行文本溢出显示省略号

  • 利用WebKit的CSS扩展属性（只有-webkit-内核才有作用）

    • p{
          width:200px;	/*限定盒子的宽度*/
          overflow: hidden; /*给元素设置溢出隐藏属性*/
          text-overflow: ellipsis; /*文本溢出显示省略号*/
          display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
          -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数，这是一个不规范的属性，它没有出现在CSS规范草案中。*/
          -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
      }