文章目录
- 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自带的验证功能。
事件:
onchange
:内容改变时触发的事件
onfocus
:文本框获得焦点时触发的事件
onblur
:文本框失去焦点时触发的事件