表单标签

BBigSun 评论32阅读模式

作用:收集用户信息

使用场景:文章源自十年又十年-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>

表单标签

纸上得来终觉浅,绝知此事要躬行。

weinxin
17688689121
我的微信
微信扫一扫
BBigSun
  • 本文由 BBigSun 发表于 2024年 5月 19日 17:20:44
  • 转载请务必保留本文链接:https://www.bbigsun.com/876.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定