【复习】html最重要的表单和上传标签

news2024/10/5 15:32:51

文章目录

img
form
input

img

	<img 
        src="https://tse1-mm.cn.bing.net/th/id/OIP-C._XVJ53-pN6sDMXp8W19F4AAAAA?rs=1&pid=ImgDetMain"
        alt="二次元"
        height="350px"
        width="200px"
    />

常用没啥说的，一般操作css多一些

form

该标签会发送一个get或者post请求然后刷新页面

属性

action属性：以get或者post的方式请求到action属性值里对应的页面。

method属性：请求方式的设置，get和post。

autocomplete属性：设置form的autocomplete属性值为”on”，然后在表单的input的输入标签中设置input的name=”username”，则输入框获得焦点后会显示用户在该浏览器上曾经输入过的用户名。可选择并自动填充。

target属性：和a标签的target属性类型，设置提交到哪个页面。

事件

onsubmit事件

from相关的其他知识：

form中一定要有个type=”submit”的提交按钮，可以是<input type="submit"/>也可以是<button type="submit">提交</button>，其中button不写类型默认是type=”submit”。两个按钮的区别是，input标签里不能有其他内容，但button标签里可以再包含其他标签，也可用图片做按钮等。

<h1>用户注册表单</h1>  
    <form action="/submit_form" method="post">  
        <!-- 文本输入 -->  
        <label for="username">用户名:</label>  
        <input type="text" id="username" name="username" required>  
        <br><br>  
  
        <!-- 密码输入 -->  
        <label for="password">密码:</label>  
        <input type="password" id="password" name="password" required>  
        <br><br>  
  
        <!-- 电子邮件输入 -->  
        <label for="email">电子邮件:</label>  
        <input type="email" id="email" name="email" required>  
        <br><br>  
  
        <!-- 单选按钮 -->  
        <p>性别:</p>  
        <input type="radio" id="male" name="gender" value="male" required>  
        <label for="male">男</label><br>  
        <input type="radio" id="female" name="gender" value="female">  
        <label for="female">女</label><br>  
        <br>  
  
        <!-- 复选框 -->  
        <p>兴趣爱好:</p>  
        <input type="checkbox" id="sports" name="hobbies" value="sports">  
        <label for="sports">运动</label><br>  
        <input type="checkbox" id="music" name="hobbies" value="music">  
        <label for="music">音乐</label><br>  
        <input type="checkbox" id="reading" name="hobbies" value="reading">  
        <label for="reading">阅读</label><br>  
        <br>  
  
        <!-- 下拉菜单 -->  
        <label for="country">国家:</label>  
        <select id="country" name="country" required>  
            <option value="china">中国</option>  
            <option value="usa">美国</option>  
            <option value="uk">英国</option>  
            <option value="canada">加拿大</option>  
        </select>  
        <br><br>  
  
        <!-- 文本区域 -->  
        <label for="bio">个人简介:</label>  
        <textarea id="bio" name="bio" rows="4" cols="50" required></textarea>  
        <br><br>  
  
        <!-- 提交按钮 -->  
        <input type="submit" value="注册">  
    </form>

表单应用非常多，这里主要是复习下form中常用的子标签，以及常见的属性值，详细的放在input标签里面说明

input

再看其他的几个input标签

<!-- 数字输入 -->  
        <label>年龄:</label>  
        <input type="number" name="age" min="0" max="120" placeholder="请输入年龄" required><br><br>  
  
        <!-- 日期输入 -->  
        <label>出生日期:</label>  
        <input type="date" name="dob" required><br><br>  
  
        <!-- 时间输入 -->  
        <label>优选时间:</label>  
        <input type="time" name="preferred_time" required><br><br>  
  
        <!-- 日期时间输入 -->  
        <label>会议时间:</label>  
        <input type="datetime-local" name="meeting_time" required><br><br>  
  
        <!-- 电话号码输入 -->  
        <label>电话号码:</label>  
        <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" placeholder="格式: 123-45-6789" required><br><br>  
  
        <!-- 颜色选择器 -->  
        <label>选择颜色:</label>  
        <input type="color" name="favorite_color" value="#ff0000"><br><br>  
  
        <!-- 文件上传 -->  
        <label>上传文件:</label>  
        <input type="file" name="uploaded_file" accept=".jpg,.jpeg,.png,.gif" required><br><br>  
  
        <!-- 隐藏输入 -->  
        <!-- 通常用于传递不需要用户修改的数据，如会话ID -->  
        <input type="hidden" name="session_id" value="abc123"><br><br>

type 属性：以下是取值范围

text：默认属性值，为输入文本框
button：为按钮
color：为一个颜色选择器
password：为输入密码，不显示输入内容，以······代替
radio：单选，要设置多个radio类型的input的name属性值相同，归为一组，在一组中单选
checkbox：多选，一组checkbox类型的input也要name相同，便于后续获取该选择的数组。
file：选择一个文件，在其后再加multiple即<input type="file" multiple/>，可同时选择多个文件内容。
hidden：隐藏文本框
number：只能输入数字，且可从输入的数字连续点击增1减1。
search：搜索框，会有x号出现删除搜索内容
required 属性：
非赋值属性，启用该属性则点击提交时提示请填写此字段，HTML自带的验证功能。