<label for="username">用戶名：</label>
<input type="text" id="username" name="username" placeholder="請(qǐng)輸入用戶名">

<label for="password">密碼：</label>
<input type="password" id="password" name="password" placeholder="請(qǐng)輸入密碼">

<label for="comment">用戶評(píng)論：</label>
<textarea id="comment" name="comment" rows="5" cols="50" placeholder="請(qǐng)留下您的寶貴意見"></textarea>

<input type="email"
       id="email"
       name="email"
       placeholder="user@example.com"
       multiple
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
       required>

<input type="tel"
       id="phone"
       name="phone"
       placeholder="13800138000"
       pattern="^1[3-9]\d{9}$"
       maxlength="11"
       inputmode="numeric">

<!-- 使用國(guó)際電話格式 -->
<input type="tel"
       name="international-phone"
       placeholder="+86 138 0013 8000"
       pattern="^\+[1-9]\d{0,3}\s?\d{4,14}$">

<input type="url"
       id="website"
       name="website"
       placeholder="https://example.com"
       pattern="https?://.+"
       required>

<label for="gender-male">性別：</label>
<input type="radio" id="gender-male" name="gender" value="male"> 男
<input type="radio" id="gender-female" name="gender" value="female"> 女

<label for="hobby-music">興趣愛好：</label>
<input type="checkbox" id="hobby-music" name="hobby" value="music"> 音樂
<input type="checkbox" id="hobby-sports" name="hobby" value="sports"> 運(yùn)動(dòng)
<input type="checkbox" id="hobby-reading" name="hobby" value="reading"> 閱讀

<label for="country">選擇國(guó)家：</label>
<select id="country" name="country">
    <option value="china">中國(guó)</option>
    <option value="usa">美國(guó)</option>
    <option value="uk">英國(guó)</option>
</select>

<label for="quantity">購(gòu)買數(shù)量：</label>
<input type="number" id="quantity" name="quantity" min="1" max="100" step="1" value="1">

<label for="birthdate">出生日期：</label>
<input type="date" id="birthdate" name="birthdate">

<label for="appointment-time">預(yù)約時(shí)間：</label>
<input type="datetime-local" id="appointment-time" name="appointment-time">

<form action="upload.php" method="post" enctype="multipart/form-data">
    <label for="upload-file">上傳文件：</label>
    <input type="file" id="upload-file" name="upload-file">
    <input type="submit" value="上傳">
</form>

<form action="process.php" method="post">
    <!-- 表單其他輸入元素 -->
    <input type="submit" value="提交表單">
</form>

<form action="process.php" method="post">
    <!-- 表單其他輸入元素 -->
    <input type="reset" value="重置表單">
</form>

<button type="button" onclick="alert('按鈕被點(diǎn)擊了！')">點(diǎn)擊我</button>

<!-- 不同的輸入模式 -->
<input type="text" inputmode="text" placeholder="文本鍵盤">
<input type="text" inputmode="numeric" placeholder="數(shù)字鍵盤">
<input type="text" inputmode="decimal" placeholder="小數(shù)鍵盤">
<input type="text" inputmode="tel" placeholder="電話鍵盤">
<input type="text" inputmode="email" placeholder="郵箱鍵盤">
<input type="text" inputmode="url" placeholder="URL鍵盤">
<input type="text" inputmode="search" placeholder="搜索鍵盤">

<!-- 地址表單 -->
<form id="address-form">
    <div class="form-group">
        <label for="fullname">姓名</label>
        <input type="text" id="fullname" name="fullname" required>
    </div>
    
    <div class="form-group">
        <label for="phone">電話</label>
        <input type="tel" id="phone" name="phone" pattern="^1[3-9]\d{9}$" required>
    </div>
    
    <div class="form-group">
        <label for="email">郵箱</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div class="form-group">
        <label for="province">省份</label>
        <select id="province" name="province" required>
            <option value="">請(qǐng)選擇</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
        </select>
    </div>
    
    <div class="form-group">
        <label for="address">詳細(xì)地址</label>
        <input type="text" id="address" name="address" required>
    </div>
    
    <div class="form-group">
        <label for="postcode">郵編</label>
        <input type="text" id="postcode" name="postcode" pattern="\d{6}" required>
    </div>
    
    <div class="form-group">
        <label>
            <input type="checkbox" name="default_address" value="1">
            設(shè)為默認(rèn)地址
        </label>
    </div>
    
    <button type="submit">保存地址</button>
</form>