表格、表单、选择器

幺鸡爱学习

已于 2024-04-20 12:34:47 修改

阅读量85

点赞数

分类专栏： Java基础文章标签：学习 java 改行学it 学习方法 html

于 2023-05-31 00:04:36 首次发布

本文链接：https://blog.csdn.net/qq_43877180/article/details/130958189

版权

Java基础专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、表格与表单

表格

显示行和列结构的标签

<table border="2px" cellpadding="5" cellspacing="10">
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th colspan="2">操作</th>
		</tr>
		<tr>
			<td>张三丰</td>
			<td>99</td>
			<td rowspan="2">男</td>
			<td><a href="#">删除</a></td>
			<td><a href="#">修改</a></td>
		</tr>
		<tr>
			<td>灭绝</td>
			<td>45</td>
			<td><a href="#">删除</a></td>
			<td><a href="#">修改</a></td>
		</tr>
		</table>

表单介绍

描述：用于前后端交互，如：注册，登录功能，输入账号和密码后，点击登录，数据传到后端，都是表单的操作

<!--表单：form
	表单属性：action，method（这两个是常用），enctype
	action：和a标签的href类似，可以跳转，后续往往跳到后端服务器

	method：请求方式，   get/post
	get请求：（默认）将数据从url中传到后端，参数格式为？name=wyz&age=45&..
	post请求：以请求体的方式传数据到后端
	区别：get效率高，不安全    post效率低，安全
	
	entype：表单提交的类型（了解）
	application/x-www-form-urlencoded：默认   文本形式提交内容
	multipart/form-data：提交二进制数据 例如：上传图片

	子标签：input 使用type表示不同的表单控件
-->

<form action="01_表格.html">
			文本框：<input type="text" name="username" value="wyz" /><br />
			密码框：<input type="passwor" name="password" /><br />
			单选框：<input type="radio" /><br />
			复选框：<input type="checkbox" /><br />
			日期框：<input type="date" /><br />
			日期和时间：<input type="datetime" /><br />
			本地时间：<input type="datetime-local" /><br />
			时间：<input type="time"/><br />
			邮箱控件：<input type="email" /><br />
			数字控件：<input type="number" /><br />
			取色：<input type="color" /><br />
			隐藏控件：<input type="hidden" /><br />
			文件控件：<input type="file" /><br />
			范围控件：<input type="range" /><br />
			<input type="button" value="普通按钮" />
			<input type="submit" value="提交按钮" />
			<input type="reset" value="重置按钮" />
			<input type="image" src="../img/009.png"  width="50px" height="30px"/>/*这里要注意单位都是要带px*/
		</form>

常用控件

常用于注册和登录功能中，以及很多其他的前后端交互的触发中

<form>
			用户名：<input type="text" /><br />
			密码：<input type="password" /><br />
			性别：<input type="radio" name="sex" />男
			<input type="radio" name="sex" />女<br />
			爱好：<input type="checkbox" name="love" />吃
			<input type="checkbox" name="love" />喝
			<input type="checkbox" name="love" />玩<br />
			省份：<select>
				<option>湖南</option>
				<option>贵州</option>
				<option>云南</option>
				<option>重庆</option>
			</select><br />
			基本介绍：<textarea rows="10" cols="30">
				本人22岁，爱好唱跳rap，篮球
			</textarea><br />
			<input type="submit" value="注册" />
		</form>

二、框架集

将多个子页面集成到一起，形成了页面的集合，叫做框架集

框架集不能和body共同使用