HTML5的<input>标签的`type`属性值详解和代码示例

<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">

<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码">

<label for="comment">用户评论：</label>
<textarea id="comment" name="comment" rows="5" cols="50" placeholder="请留下您的宝贵意见"></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">

<!-- 使用国际电话格式 -->
<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"> 运动
<input type="checkbox" id="hobby-reading" name="hobby" value="reading"> 阅读

<label for="country">选择国家：</label>
<select id="country" name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="uk">英国</option>
</select>

<label for="quantity">购买数量：</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">预约时间：</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('按钮被点击了！')">点击我</button>

<!-- 不同的输入模式 -->
<input type="text" inputmode="text" placeholder="文本键盘">
<input type="text" inputmode="numeric" placeholder="数字键盘">
<input type="text" inputmode="decimal" placeholder="小数键盘">
<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="">请选择</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
        </select>
    </div>
    
    <div class="form-group">
        <label for="address">详细地址</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">
            设为默认地址
        </label>
    </div>
    
    <button type="submit">保存地址</button>
</form>