html5新增标签（上）

来源：互联网发布：火爆网络的ann是谁编辑：程序博客网时间：2024/06/05 10:43

placeholder是指当文本框input="text" 或textarea 处于未输入状态时显示的输入提示。

<body>

</body>

       label标签为input元素定义标注（标记）。
        label元素不会向用户呈现任何特殊效果，不过，它为鼠标用户改进了可用性。如果您在label元素内点击文本，
        就会触发次控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
        label标签的for属性应当与相关元素ID属性相同。

<body>

<form action="demo_form.html">
           Username:<input type="text" name="usrname" requirde>
           <input type="submit">
       </form>
           <form action="demo_form.asp">
               <label for="male">Male</label>
               <input type="radio" name="sex" id="male" value="male"><br/>
               <label for="female">Female</label>
               <input type="raido" name="sex" id="female" value="female"><br/>
             <input type="submit" value="提交">
       </form>

    </body>

<body>
     <article>
           <h1>苹果</h1>
           <p><b>苹果</b>，植物类水果，多次花果...</p>
           <section>
               <h2>红富士</h2>
               <p>红富士是从普通富士的芽（枝）变中选育出的找色系富的统称..</p>
           </section>
           <section>
               <h2>国光</h2>
               <p>国光苹果品，又名小国光、万寿。原产美国，1600年发现的偶然实在苗...</p>
           </section>
       </article>

<section>
            <h1>水果</h1>
              <article>
                  <h2>苹果</h2>
                  <p>苹果，植物类水果，多次花果...</p>
              </article>
              <article>
                <h2>橘子</h2>
                <p>橘子，是荟香料柑橘属的一种水果...</p>
              </article>
              <h2>香蕉</h2>
              <p>香蕉，属于芭蕉料芭蕉属植物，又指其果实</p>
        </section>
    </body>

       在html5中，为单行文本框input type="text" 增加了一个list属性，该属性的值为某个datalist元素的ID
        .datalist元素也是html5中新增的元素，该元素似于选择框（select元素），但是当用户想要设定的值不在
        选择列表之内时，允许自动输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。
        为了避免在没有支持该元素的浏览器上出现显示错误，可以用CSS等将它设定为不显示。如下图片是显示效果

<body>
    text:<input type="text" name="greeting" list="greetings" placeholder="请输入内容">
     
     <datalist id="greetings" style="display:none;">
         <option value="Good Morning">Good Morning</option>
         <option value="Hello">Hello</option>
         <option value="Good Afternoon">Good Afrernoon</option>
     </datalist>
    </body>

   在html5中，对input元素使用pattern属性，并且将属性值设置为某个格式的正则表达式，
    在提交时会对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合给定格式时，
    则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。譬如
    下面代码所示，要求输入内容为一个数字与三个大写字母。

    <body>
    <form>
       请输入指定格式的内容： <input pattern="[0-9][A-Z]{3}" name="part">
       <input type="submit">
    </form>
    </body>

0 0