HTML5+CSS3  制作简单留言簿
在HTML 5之前，要制作一个留言簿需要用将表单数据提交到数据库，再从数据库中读取出来。而在HTML 5中，用户可以直接通过本地存储的优势创建简单的留言簿。
操作步骤：
（1）创建index.html文件，并在<body>标签中插入<h1>和<form>标签，以及标签内容。
<h1>留言簿</h1>
<form action="#" method="get" accept-charset="utf-8">
  <p class="form_item">
    <label for="">昵称：</label>
    <input type="text" name="" value="" id="name" required/>
  </p>
  <p class="form_item">
    <label for="">留言：</label>
    <textarea rows="3" cols="30" name="" value="" id="msg" required></textarea>
  </p>
  <p class="form_item">
    <input type="submit" id="save" value="发表留言"/>
    <input type="button" id="clear" value="清除留言"/>
  </p>
</form>
（2）在<style>标签中，添加对<form>表单的样式设置，如文本、定位、label标签样式、input样式等。
.form_item {
    min-height: 30px;
    margin-top: 5px;
    text-indent:0;
}
.form_item label {
    display: block;
    line-height: 24px;
}
.form_item input[type="text"] {
    width: 180px;
    height:24px;
    line-height: 24px;
}
.form_item textarea {
    vertical-align: top;
}
.form_item input[type="submit"], input[type="button"] {
    width: 80px;
    height:24px;
    line-height: 24px;
    border:1px solid #ff6600;
    border-radius:4px;
    background:#ff6600;
    outline:none;
    color:#fff;
    cursor: pointer;
}
.form_item input[type="submit"] {
    margin-right: 50px;
}
.form_item input[type="submit"]:hover {
    position: relative;
    top:1px;
}
（3）在<form>标签下面，添加对本地存储的JavaScript代码。并将表单提交的内容，添加到本地存储数据库中，然后，再读取数据，并显示到网页中。
<script type="text/javascript" charset="utf-8"> 
    (function(){ 
        var datalist = getE('datalist'); 
        if(!datalist){ 
            datalist = ateElement('dl'); 
            datalist.className = 'datalist'; 
            datalist.id = 'datalist'; 
            document.body.appendChild(datalist); 
        } 
        var result = getE('result'); 
        var db = openDatabase('myData','1.0','test database',1024*1024); 
        showAllData() 
        db.transaction(function(tx){ 
            tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)',[]); 
        }) 
        getE('clear').onclick = function(){ 
            db.transaction(function(tx){ 
                tx.executeSql('DROP TABLE MsgData',[]); 
            }) 
            showAllData() 
        } 
        getE('save').onclick = function(){ 
            saveData(); 
            return false; 
        } 
        function getE(ele){ 
            ElementById(ele); 
        } 
        function removeAllData(){ 
            for (var i = datalist.children.length-1; i >= 0; i--){ 
                veChild(datalist.children[i]); 
            } 
        } 
        function showData(row){ 
            var dt = ateElement('dt'); 
            dt.innerHTML = '<time>' + row.time + '</time>' + '<address>' + row.name + '</address>'; 
            var dd = ateElement('dd'); 
            dd.innerHTML = row.msg; 
            datalist.appendChild(dt); 
            datalist.appendChild(dd); 
        } 
        function showAllData(){ 
            db.transaction(function(tx){ 
                tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)',[]); 
                tx.executeSql('SELECT * FROM MsgData',[],function(tx,result){ 
                    removeAllData(); 
                    for(var i=0; i < ws.length; i++){ 
                        ws.item(i)); 
                    } 
                }); 
            }) 
        } 
        function addData(name,msg,time){ 
            db.transaction(function(tx){ 
                tx.executeSql('INSERT INTO MsgData VALUES(?,?,?)',[name,msg,time],function(tx,result){ 
                     
                },function(tx,error){ 
                    result.innerHTML= error.source + ':' + ssage; 
                }) 
            }) 
        } 
        function saveData(){ 
            var name =getE('name').value; 
            var msg = getE('msg').value; 
            var time = new Date(); 
            timetime = LocaleDateString() + ':' + LocaleTimeString(); 
            addData(name,msg,time); 
            showAllData(); 
        } 
    })(); 
    </script>
（4）由于在JavaScript代码中，通过代码添加了id为datalist的<dl>标签。所以，在<style>标签中，可以为其标签添加样式效果。
如何用css美化表单

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。