元素示例


<body>
<form id="testform"></form>
请选择一个数值：
<input  name="range1" type="range" min=0 max=100 step=5/>
<output onforminput="value=range.value">50</output>
</body>

<input name="number1" type="number" value="25" min="10" max="100" step="5"/>
<input type="submit" value="提交"/>

<body>
<form>
<label for="username">姓名</label>
<input  name="username" id="username" type="text"  required /><br />
<label for="age">年龄</label>
<input  name="age" id="age" type="number" min="0" max="100"/><br />
<label for="birthday">出生日期</label>
<input  name="birthday" id="birthday" type="date"/><br />
<label for="email">Email</label>
<input  name="email" id="email" type="email" required/><br />
<label for="url">个人主页</label>
<input  name="url" id="url" type="url"/><br />
<label for="memo">个人简介</label>
<textarea name="memo" id="memo" required></textarea><br />
<input type="submit" value="提交" />
</form>
</body>

以下代码是加入了判断

<script language="javascript">
function check()
{
     var email=document.getElementById("email");
     if(email.value=="")
     {
         alert("请输入Email地址");
         return false;
         }
         else if(!email.checkValidity())
               alert("请输入正确的Email地址");
          else
               alert("您输入的Email地址有效");
}
</script>
<form id="testform" onsubmit="return check();">
<label for="email">Email</label>
<input  name="email" id="email" type="email"/><br />
<input type="submit" value="提交" />
</form>

<script>
var progressBar=document.getElementById("p");
function buttom_onclick()
{
    var progressBar=document.getElementById("p");
    progressBar.getElementsByTagName("span")[0].textContent="0";
    for(var i=0;i<=100;i++)
       updateProgress(i);
    }
function updateProgress(newValue)
{
    var progressBar=document.getElementById("p");
    progressBar.value=newValue;
    progressBar.getElementsByTagName("span")[0].textContent=newValue;
    }
</script>
<section>
    <h2>progress元素的使用示例</h2>
    <p>完成百分比：<progress id="p" max=100><span>0</span>%</progress></p>
    <input  type="button" onclick="button_onclick()" value="请点击"/>
</section>

<article>
    <h1>article元素</h1>
     <p>一块独立的内容。它可以用来RRS中一块独立的内容，也可以用来表示博客中独立的一篇文章。。。</p>
    <aside>
    <h2>术语解释</h2>
    <dl>
        <dt><dfn>RSS</dfn></dt>
        <dd>RSS也叫聚合RSS是在线共享内容的一种简易方式（也叫聚合内容）。。。</dd>
        <dt><dfn>博客</dfn></dt>
        <dd>博客，又译为网络日志、部落格或部落阁等，是一种通常由个人管理。。</dd>
    </dl>
    </aside>
</article>