HTML5點餐代碼是建立在HTML5技術之上的新型點餐系統,其具有結構清晰、使用方便等特點。以下是一個簡單的HTML5點餐代碼示例:
<!DOCTYPE html> <html> <head> <title>HTML5點餐代碼示例</title> </head> <body> <h1>歡迎光臨餐廳</h1> <form> <fieldset> <legend>請填寫您的用餐信息</legend> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br> <label for="tel">電話:</label> <input type="tel" id="tel" name="tel"><br> <label for="table">桌號:</label> <input type="number" id="table" name="table"><br> <label for="dishes">請選擇您要點的菜品:</label><br> <input type="checkbox" id="dishes1" name="dishes1"> <label for="dishes1">紅燒肉</label><br> <input type="checkbox" id="dishes2" name="dishes2"> <label for="dishes2">宮保雞丁</label><br> <input type="checkbox" id="dishes3" name="dishes3"> <label for="dishes3">清蒸鱸魚</label><br> <input type="submit" value="提交"> </fieldset> </form> </body> </html>
上述代碼中,使用了HTML5的語義化標簽,如<header>、<nav>、<footer>等,使頁面結構更加清晰;使用<fieldset>和<legend>標簽,將表單數據進行分組,更加方便用戶使用;使用<input>標簽的type屬性,實現了文本輸入、電話號碼輸入、數字輸入和復選框等不同的輸入方式。通過這些簡單的代碼,我們可以快速地實現一個基本的HTML5點餐系統。