HTML学习-表单

我会带着你远行 2023-10-02 13:42 1阅读 0赞

## 表单 ##

<form action="1.我的第一个网页.html" method="post">
    	<p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
        
    </form>

### 文本输入框 ###

<p>名字:<input type="text" name="username" value="11234" maxlength="8" size="30"></p>
        <p>密码:<input type="password" name=""pwd></p>

### 单选框标签 ###

<p>性别：
            <input type="radio" value="boy" name="sex" checked>男
            <input type="radio" value="girl" name="sex">女
        </p>

### 多选框标签 ###

<p>爱好：
            <input type="checkbox" value="sleep" name="hobby">睡觉
            <input type="checkbox" value="code" name="hobby" checked>敲代码
            <input type="checkbox" value="chat" name="hobby">聊天
            <input type="checkbox" value="game" name="hobby">游戏
        </p>

### 按钮 ###

<p>按钮：
            <input type="button" name="btn1" value="点击边长">
            <input type="image" src="../resources/image/mmexport1565261735921.jpg.JPG">
        </p>

### 下拉框、列表框 ###

<p>国家：
            <select name="列表名称">
                <option value="china">中国</option>
                <option value="US">美国</option>
                <option value="eth" selected>瑞士</option>
                <option value="yingdu">印度</option>
            </select>
        </p>

### 文本域 ###

<p>反馈：
            <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
        </p>

### 文件域 ###

<p>
            <input type="file" name="files">
            <input type="button" name="upload" value="上传">
        </p>

### 邮箱验证 ###

<p>邮箱：
            <input type="email" name="email">
        </p>

### URL ###

<p>URL:
            <input type="url" name="url">
        </p>

### 数字 ###

<p>数字：
            <input type="number" name="num" max="100" min="0" step="10">
        </p>

### 滑块 ###

<p>滑块：
            <input type="range" max="100" min="0" step="2">
        </p>

### 搜索框 ###

<p>搜索：
            <input type="search" name="search">
        </p>

## 表单的应用 ##

### 隐藏域 ###