下面是一個(gè)基于HTML5的手機(jī)注冊(cè)頁(yè)面的代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手機(jī)注冊(cè)</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet"> <style> body { font-family: 'Roboto', sans-serif; background-color: #f1f1f1; } .container { max-width: 400px; margin: 0 auto; background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; margin-bottom: 20px; } input[type=text], input[type=password] { width: 100%; padding: 10px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 5px; } button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; width: 100%; margin-top: 10px; } button:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h1>手機(jī)注冊(cè)</h1> <form action="#" method="post"> <p><label for="username">用戶名:</label><br /><input type="text" name="username" id="username" required></p> <p><label for="password">密碼:</label><br /><input type="password" name="password" id="password" required></p> <p><label for="email">郵箱:</label><br /><input type="text" name="email" id="email" required></p> <p><button type="submit">注冊(cè)</button></p> </form> </div> </body> </html>以上代碼定義了一個(gè)基本的HTML5頁(yè)面,它包含一個(gè)標(biāo)題、一個(gè)表單和一些基本的樣式。這個(gè)表單提供了一個(gè)用戶名、密碼和電子郵件地址的輸入字段,以及一個(gè)注冊(cè)按鈕。當(dāng)用戶填寫了所有必填字段并點(diǎn)擊注冊(cè)按鈕時(shí),頁(yè)面會(huì)根據(jù)表單的action屬性和method屬性將表單數(shù)據(jù)發(fā)送到服務(wù)器上進(jìn)行處理。在本例中,action屬性被設(shè)置為"#",也就是發(fā)送數(shù)據(jù)到當(dāng)前頁(yè)面,而method屬性被設(shè)置為"post",表示使用HTTP POST請(qǐng)求來(lái)發(fā)送數(shù)據(jù)。