五、表单标签
2023-09-25 本文已影响0人
by依白
前言
用到表单的三种情况：
1.注册页面
2.登入页面
3.搜索页面
下面讲一些常用的标签即属性
1.input标签
input可以根据type属性的不同，展示不同的效果
| type属性值 | 说明 |
|---|---|
| text | 文本框用于输入单行文本 |
| password | 密码框，用于输入密码 |
| dio | 单选框，用于多选一 |
| checkbox | 多选框，用于多选多个 |
| file | 文件选择，用于上传文件 |
| submit | 提交按钮，用于提交 |
| reset | 重置按钮，用于重置 |
| button | 普通按钮，默认无功能，配合js添加功能 |
1.1文本框
<input type="text"value="123">
image.png
value为默认给输入框设定的内容，可忽略
1.2密码框
<input type="password">
image.png
1.3input占位符
placeholder 用于提示信息
<input type="password" placeholder="请输入密码">
image.png
1.4单选框
<input type="radio"name="sex" checked>单选框<br>
<input type="radio" name="sex">单选框
==checked==为默认选中值
==name定义名称==，相同名称的为一组，可实现多选一
image.png
1.5多选框
<input type="checkbox"name="tre">跑步
<input type="checkbox"name="tre"checked>读书
<input type="checkbox"name="tre">音乐
image.png
同上==checked==为默认选中值
==name定义名称==，相同名称的为一组，方便后续提取内容
1.6文件选择
multiple 多文件提交,不添加则单文件
<input type="file" multiple>
image.png
1.7input按钮
1.7.1提交按钮
<input type="submit">
1.7.2重置按钮
<input type="reset">
2. button按钮
<button>普通按钮</button>
image.png
==普通按钮无任何功能，配合js使用==
同样可以给他添加type属性，同input系列按钮
举例
<button type="submit">提交</button>
3.select下拉菜单标签
<select name="">
<option value="">下拉列表1</option>
<option value="">下拉列表2</option>
</select>
image.png
当我们加入size属性时
<select name=""size="5">
<option value="">下拉列表1</option>
<option value="">下拉列表2</option>
</select>
image.png
4.textarea文本域
==cols水平的文字字符长度，rows垂直文字字符长度==
<textarea name="" id="" cols="30" rows="10"></textarea>
image.png
右下角可以自由拉伸大小
5. label标签
<label for=""></label>
==for用于绑定id，当点击label标签的文字时执行被绑定id的事件==
示例：
<input type="radio"name="sex"id="male"checked><label for="male">男</label>
<input type="radio"name="sex"id="female"><label for="female">女</label>
image.png
如上，当点击文字时也会选择单选框
6form标签
<form action="" method="post">
<input type="submit" value=""/>
</form>
| 属性 | 说明 |
|---|---|
| action | 发送去的地址 |
| method | 提交方式，get或post |
用于处理的元素都应放在form标签里，否则部分控件失效，如重置，提交按钮
get一般用于搜索，post相对安全性高常用于提交信息
练习
如图，单选框默认属性选择男，单击男或女能实现选中，能上传多个文件，重置信息功能正常
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="" method="post">
<table border="1" cellspacing="0" cellpadding="0" width="380">
<tr bgcolor="cornflowerblue">
<td>个人信息</td>
</tr>
<tr>
<td>姓名:<input type=" text" name="name" id="" value="" />
</td>
</tr>
<tr>
<td>邮箱:<input type="text" name="youxiang" id="" value="" />
<select name="qcm">
<option value="@qq.com">@qq.com</option>
<option value="@163.com">@163.com</option>
</select>
</td>
</tr>
<tr>
<td><label>手机号码:</label><input type="text" name="sjh" id="" value="" /></td>
</tr>
<tr>
<td>
<input type="radio" name="sex" id="male" checked><label for="male">男</label>
<input type="radio" name="sex" id="female"><label for="female">女</label>
</td>
</tr>
<tr>
<td>
<label>爱 好:</label>
<input type="checkbox" name="uk1" id="" value="游泳" />游泳
<input type="checkbox" name="uk2" id="" value="读书" />读书
<input type="checkbox" name="uk3" id="" value="跑步" />跑步
</td>
</tr>
<tr>
<td><label>学校:</label><select name="xuexiao">
<option value="未选择">请选择</option>
<option value="复旦大学">复旦大学</option>
<option value="清华大学">清华大学</option>
<option value="武汉大学">武汉大学</option>
</select></td>
</tr>
<tr>
<td>自我介绍:<br>
<textarea rows="8" cols="50" name="zwjs"></textarea>
<input type="file" name="" id="" multiple>
</td>
</tr>
<tr>
<td>
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
总结
占位符 ==placeholder== 用于提示信息。
单选和多选框的属性：
==checked==为默认选中值
==name==定义名称，相同名称的为一组，方便后续提取内容。
多文件提交我们可以添加==multiple==来实现
当下拉列表添加==size==属性时，可无需下拉显示元素
==label的for==属性用于绑定id，常和选择框一起绑定
道阻且长，行则将至
好了，今天讲的内容就到这里啦，以上有什么不懂的欢迎随时评论区交流或私信我，看到都会解答，以上有什么讲的不规范的内容，欢迎大佬及时纠正我的错误
