HTML之表格、表单

用

<table>

<tr>

<td>单元格</td>

</tr>

</table>

可以创建一个最简单的只有一行、一个单元格的表格。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML表格</title>
</head>
<body>
<!--border用来设置边框宽度
align对齐方式
width表格宽度
height表格高度
-->
<!--让表格居中浏览器-->
<table align="center"border="1px"width="300px"height="200px"><!--让整行居中--><tr align="center"><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr ><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr ><td>单元格</td><td>单元格</td><!--单独让一个单元格中的内容居中--><td align="center">单元格</td></tr>
</table><table border="1px"width="300px"height="200px"><tr><td>单元格</td><td>单元格</td><!--行合并口诀：将后面的单元格注释掉，在前面的单元格上使用rowspan属性进行合并--><td rowspan="2">单元格</td></tr><tr><td>单元格</td><td>单元格</td><!--<td>单元格</td>--></tr><tr><td>单元格</td><!--列合并：两个单元格随意注释其中一个，在另一个单元格中使用colspan进行列合并，合并几个写几个--><!--<td>单元格</td>--><td colspan="2">单元格</td></tr><!--th标签也可以做单元格，会自动加粗，自动居中--><th>单元格</th><th>单元格</th><th>单元格</th></table>
<br><!--表格是可以分为三部分的：表头、表体、表脚
thead tbody tfoot把表格分隔为三部分，在表现形式上没有任何变化
-->
<table border="1px"><thead><tr><td>单元格</td></tr></thead><tbody><tr><td>单元格</td></tr></tbody><tfoot><tr><td>单元格</td></tr></tfoot></table></body>
</html>

用<form></form>可以创建一个表单。

表单可以用来收集用户的数据，提交表单时，可以向服务器发送请求，并且还可以携带用户填写的数据。

form标签的属性：

action属性用来指定请求路径，也就是说数据提交的时候，提交给谁。action属性和超链接的href属性相同，都是提供“请求路径”的。

method属性用来指定表单提交的方式，常见的有两种：

get方式提交：提交的时候，提交的数据会直接显示在浏览器的地址栏上

post方式提交：提交的时候，提交的数据不会直接显示在浏览器的地址栏上

当method缺省的时候，默认采用get方式提交。只有当method设置为post的时候，表单才会采用post方式提交。当使用超链接，或者直接在浏览器地址栏上输入URL，这些都是get请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body>
<!--当使用超链接，或者直接在浏览器地址栏上输入URL，这些都是get请求-->
<form action="http://www.baidu.com" method="get">
<!--提交按钮
input标签被称为输入域，当type是submit的时候，表示提交按钮
提交按钮具有提交表单的能力
提交表单就是发送请求，并且提交数据
<input type="submit“/>
--><!--设置按钮上显示的文本，使用value属性--><input type="submit" value="百度"/><br><!--普通按钮，不具备提交表单的能力--><input type="button" value="百度按钮"/>
</form>
<br>
<!--submit按钮具有提交能力，但是要放到form表单内部，提交的是当前表单-->
<input type="submit" value="百度2"/>
<br>
<!--这样也可以画出一个按钮对象-->
<button>我是一个按钮对象</button>
</body>
</html>

input标签是form表单中非常重要的输入域控件，所有的输入域控件都是用来收集用户的数据。用户实际上就是向输入域控件中输入数据的

input标签中最常用的属性是type属性，type属性用来设置输入域控件展示的样式：

text 文本框

password 密码框

radio 单选按钮

checkbox 复选框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单2</title>
</head>
<body>
<form action="http://localhost:8080/oa/login" method="get">
<h2>user login</h2>
<hr>
<!--文本框 对于文本框来说，是有value属性的，但是不需要程序员指定，因为用户会填写，用户填写的就是value-->
username:&nbsp;&nbsp;<input type="text" name="yonhuming"/><br>
<!--密码框-->
password:&nbsp;&nbsp;<input type="password" name="mima"/><br><!--这样写，会导致"hi=login"提交
<input type="submit" name="hi" value="login">
-->
<!--提交按钮  提交按钮只是为了起到提交的作用，按钮上的数据是不需要提交的，不需要提交的数据别写name属性-->
<input type="submit" value="login"/>
</form>
<!--
以上表单提交的时候，数据格式是：
http://localhost:8080/oa/login?yonhuming=zhan&mima=123
注意：当一个表单提交数据的时候，输入域控件必须有name属性，没有name属性，这个数据是不会提交的
任何一个浏览器都是采用以上的格式提交的
-->
</body>
</html>

注册表单：

以下是一个注册/提交简历的案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册表单</title>
</head>
<body>
<form action="http://localhost:8080/oa/register" method="get"><!--对于文本框来说value是不需要程序员指定的，用户会填写-->用户名 <input type="text" name="username"/><br><!--密码框的value也是用户填写的-->密码 <input type="password" name="password"/><br>性别<!--对于单选按钮来说，value属性是必须要提供的最终表单提交的数据是:sex=1或者sex=0男 女 这几个汉字是不会提交给服务器的，汉字只是一个参考对于同一组单选按钮来说，name属性必须一致，才可以保证单选checked默认选中女<input type="radio" name="sex" value="0" checked/>-->男<input type="radio" name="sex" value="1"/>女<input type="radio" name="sex" value="0"/><br>学历<!--下拉列表 selected默认选中<option value="4" selected>硕士</option>--><select name="grade"><!--选项 真正提交的是value--><option value="">--请选择学历--</option><option value="1">高中</option><option value="2">大专</option><option value="3">本科</option><option value="4">硕士</option></select><br>兴趣<!--同一组的复选框，name属性也必须一致-->打篮球<input type="checkbox" name="aihao" value="ba"/>踢足球<input type="checkbox" name="aihao" value="foot"/>羽毛球<input type="checkbox" name="aihao" value="yu"/><br>简介<!--文本域对于textarea来说value是不需要的--><textarea rows="10" cols="60" name="jianjie"></textarea><br><!--提交表单--><input type="submit" value="注册"/><!--重置表单--><input type="reset" value="重置"/><br><!--下拉列表怎么显示多个条目，怎么支持多选size属性：用来设置下拉列表一次可以显示的条目数量multiple属性：用来设置支持多选 按住ctrl键即可多选-->省份：<select name="province" size="4" multiple><option value="">--请选择省份--</option><option value="1">湖南省</option><option value="2">湖北省</option><option value="3">河南省</option><option value="4">河北省</option><option value="5">山西省</option><option value="6">陕西省</option></select></form>
</body>
</html>

HTML之表格、表单相关推荐

2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
vue.js 表格表单序号
vue.js 表格表单序号表格是动态的,通过v-for="(item,index) in sites" 循环出来的表格 ,通过index属性,实现表格序号自增, 结合页码和每页数 ...
【4001】通过html做一个静态页面的表格表单，嘿嘿。
学习目标: [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知识做静态页面表格表单完成效果,效果图如下: 表单不加颜色是这样的,自己看着设计: ...
通过CSS，H5，JavaScript实现表格表单的随机选择，和简单的随机点名。
目录一.表格表单的随机选择效果展示(表单内容可以根据自己需要进行修改) 1.H5的布局第一步: 第二步: 2.CSS布局 3.JS的布局第一步: 第二步: 第三步: 二.简单的随机点名效果展 ...
表格表单HTML代码学生登记,html实现用户注册页面（表单+表格）——html小练习...
1 2 3 4 5 表格+表单练习 6 7 8 9 10 11 注册新用户 12 13 14 15 16 17 18 19 20 21 22 23 用户名 24 25 26 27 登陆邮箱 28 29 ...
js table 生成序号_el-table树形表格表单验证，js树形列表生成序号
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
js table 生成序号_el-table树形表格表单验证(列表生成序号)
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
HTML、CSS、表格表单简单代码笔记
学习更多建议菜鸟教程 Target使用 <!DOCTYPE html> <html lang="en"> <head><meta char ...

HTML之表格、表单

HTML之表格、表单相关推荐

最新文章

热门文章