HTML之fieldset、textarea、meter、dialog、details、datalist

fieldset：块级元素，表示控件的集合，把相关组件连在一起

legend设置标题。

       <fieldset>
            <legend>用户名</legend>
            <input type="text" name="wd" value="test" maxlength="5" disabled>
            <input type="text" name="wd" value="test" maxlength="5" readonly>

        </fieldset>

textarea:多行文本输入框 

cols 设置宽度，一行可输入多少字符

rows 设置高度，显示多少行

         <p>
            <textarea name="textarea" cols="30" rows="10"></textarea>
        </p>

 meter(min max value)

         <p>
            今天<meter min="0" max="100" value="40"></meter>度
        </p>
      

dialog 对话框 块级元素 脱离网页布局 

         <p>
            <dialog open>
                dialog
            </dialog>
        </p>
      

 

details 折叠元素 默认会把内容折叠

summary设置折叠的标题

         <p>
            <details>
                <summary>详情</summary>
                12345
            </details>
        </p>

 

 

datalist设置数据列表，必须绑定

option 设置数据选项

input 的list属性可以绑定datalist的id

      <p>
            <input type="text" name="search" list="num">
            <datalist id="num">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>

            </datalist>
        </p>