表单标签

BBigSun

119
文章

0
评论

2024年 5月 19日 17:20:44评论68阅读模式

作用：收集用户信息

使用场景：文章源自十年又十年-https://www.bbigsun.com/876.html

登录页面
注册页面
搜索页面

input 标签

input 标签 type 属性值不同，则功能不同文章源自十年又十年-https://www.bbigsun.com/876.html

<input type="">

type 属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

文本框：<input type="text" name="username" value="请输入用户名"><br>
密码框：<input type="password" name="password" value="请输入密码"><br>
单选框：<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女<br>
多选框：<input type="checkbox" name="interest" value="reading">阅读<input type="checkbox" name="interest" value="swimming">游泳<br>
提交按钮：<input type="submit" value="提交"><br>
重置按钮：<input type="reset" value="重置"><br>
选择文件: <input type="file" name="file"><br>

表单标签文章源自十年又十年-https://www.bbigsun.com/876.html

单选框 radio

常用属性文章源自十年又十年-https://www.bbigsun.com/876.html

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女

上传文件 file

默认情况下，文件上传表单控件一次只能上传一个文件，上传多个文件加 multiple文章源自十年又十年-https://www.bbigsun.com/876.html

上传文件：<input type="file" multiple >

多选框 checkbox

多选框也叫复选框文章源自十年又十年-https://www.bbigsun.com/876.html

默认选中：checked文章源自十年又十年-https://www.bbigsun.com/876.html

<input type="checkbox" checked>

下拉菜单

默认选中： selected文章源自十年又十年-https://www.bbigsun.com/876.html

下拉列表: <select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou" selected>广州</option>
</select>

文本域

作用：多行输入文本的表单控件文章源自十年又十年-https://www.bbigsun.com/876.html

标签： textarea，双标签文章源自十年又十年-https://www.bbigsun.com/876.html

<textarea>提示文字</textarea>

文本域: <textarea name="message" rows="5" cols="30">请输入内容...</textarea>

工作中使用 css 设置大小

label 标签

作用：网页中，某个标签的说明文本

经验：用label 标签绑定文字和表单控件的关系，增大表单控件的范围。

label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域

写法一：

<input type="audio" name="gender" id="man">
<label for="man">男</label>

写法二：

<label><input type="audio" name="gender">男</label>

按钮标签

<buttun type="">按钮</buttun>

type属性名	作用	特殊说明
submit	提交按钮	点击后可以提交数据到后台
reset	重置按钮	点击后表单控件恢复默认值
button	普通按钮	默认没有功能，配合Js 使用

使用需要用form标签包裹

<form action="submit.php" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password"><br>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
</form>

表单标签