当前位置：首页 > news >正文

前端——表单标签样式

news 来源：原创 2024/9/24 5:58:35

1. form表单标签块级元素

action: 表单提交地址

method: 表单提交格式 https网络协议请求格式: post/get等通常: post方式是发送数据而get是拿取数据

name: 表单的名称

target: 提交完表单之后你的新页面在哪里打开

2. input输入控件

可以通过type属性展示不同的输入效果

a.text 单行文本输入框

b.password 密码输入框

c.submit 提交按钮

d.radio 单选按钮

- name属性控件名称

- value属性输入控件里面的值

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#form{width: 500px;height: 400px;border: 2px solid  red;margin: auto;}#form input{width: 200px;height: 50px;}.sub{width: 220px;height: 45px;background-color: orange;}</style>
</head>
<body><!-- 表单就是一个用来收集用户信息的    --><form action=""  method='' name='login'  target=''  id='form'><!-- 单行文本输入框 -->账号:<input type="text"><br><!-- 密码输入框 -->密码:<input type="password"  name='pass'><br><!-- 提交按钮  写到form区域 具有刷新页面功能 --><input type="submit"  class='sub'  value='登录'></form><!-- 一组单选按钮   name属性要一致 -->男:<input type="radio" name='sex'>女:<input type="radio"  name='sex'><!-- 多选按钮 --><input type="checkbox">篮球<input type="checkbox">唱歌<input type="checkbox">跳舞<input type="checkbox">小黑紫
</body>
</html>

e.button 空按钮如果需要设置按钮名字那就设置value

- name属性控件名称

- value属性输入控件里面的值

- placeholder 提示文本框里面该输入什么内容

- button按钮标签专门来当按钮的

- checked 表示勾选状态只能用在单选和多选按钮

- disabled 禁用状态

例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><form action=""><!-- 如果是一组单选按钮 那就name属性要一致   --><!-- <input type="radio" name='sex'>男<input type="radio" name='sex'>女 --><input type="radio" name='sex' id='sex'><!-- label  规定辅助这个input控件描述   一般来放文字for属性 辅助input里面的id 进行选择 --><label for="sex">男</label><input type="radio" name='sex'><label>女</label><!-- 多选按钮  --><p>选择你喜欢的电影类型?(多选)</p><input type="checkbox"  checked><label for="">恐怖</label><input type="checkbox"><label for="">喜剧</label><input type="checkbox"><label for="">动作</label><input type="checkbox"><label for="">爱情</label><input type="checkbox"><label for="">科幻</label><!-- 重置按钮  清空效果功能  必须在form表单区域内使用   --><input type="reset"><!-- 空按钮 --><input type="button" value="登录" id=""><!-- 按钮标签 --><button>按钮标签</button><!-- 文件上传按钮    multiple: 选择多个文件上传--><input type="file"   multiple><!-- 数字输入框    只能输入数字   除了字母e    自然常数，符号e，为数学中一个常数，是一个无限不循环小数，且为超越数，其值约为2.718281828459045。--><input type="number"  disabled><!--邮件输入框 --><input type="email"><!-- 日期选择框 --><input type="date"><!-- 时间 --><input type="time"><!-- 多行文本输入框 --><textarea name="" id="" cols="30" rows="10"></textarea><!-- 下拉列表标签 --><select name="" id=""><!-- 下拉列表项 --><option value="1">星期一 在家睡觉</option><option value="2">星期二 躺着看小说</option><option value="3">星期三 打游戏玩一下金铲铲</option><option value="4">星期四 躺着打游戏</option><option value="5">星期五 终于要放假</option><option value="6">星期六 学习一下python</option><option value="7">星期天 带上朋友逛街去</option></select><input type="color"></form></body></html>