表格/表单

来源：互联网发布：慕课网python教程编辑：程序博客网时间：2024/06/16 11:01

表格

语法：

<table>    <tr>        <th></th>    </tr>    <tr>        <td></td>    </tr></table>

一对tr表示一行;一对td表示一个单元格（一列）
1）width=”表格的宽度”
2）height=”表格的高度”
3）border=”表格的边框”
4）bordercolor=”边框色”
5）cellspacing=”单元格与单元格之间的间距”
6）cellpadding=“单元格与内容之间的距离”
7）align=”表格水平对齐方式”
left、right、center、 valign=“垂直对齐” top\bottom\middle
8）合并单元格属性：(td)
合并列： colspan=“所要合并的单元格的列数”
合并行： rowspan=“所要合并单元格的行数”

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            /*设置表的大小*/            table{width: 400px;height: 300px;cellspcing :1px}            /*设置每个表格的大小*/            tr{height: 33%;}            td{width: 25%;height: 33%;}            /*表头*/            caption{height: 40px;}        </style>    </head>    <body>        <table border="2">            <!--表头-->            <caption>表头</caption>            <tr>                <th colspan="5">个人简历</th>            </tr>            <tr>                <!--插入图片   合并列： colspan  合并行： rowspan-->                <td rowspan="2" colspan="2"><img src="img/1.jpg" width="100%"/></td>                <!--文本居中-->                <td align="center">江疏影</td>                <td align="center">大长腿</td>                <td align="center">女神</td>            </tr>            <tr>                <td align="center">江疏影</td>                <td align="center">大长腿</td>                <td align="center">女神</td>            </tr>                   </table>    </body></html>

表单

表单的作用：用来收集用户的信息的;

1、表单框

 <form name=“表单名称” method=“post/get”  action=“路径"> </form>

2、表单控件

 <input type="" /><input  type=“”  name=“”  value=“” size=“”  maxlength=" "    />

Input：标记可以创建按钮、文本输入框、选择框等各种类型的输入字段。
name：属性标识表单域的名称；
type：属性标识表单控件的类型，大概有十几种；
Value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。
maxlength：控制最多输入的字符数，
Size：控制框的宽度（以字符为单位）

1）文本框 <input type="text" value="默认值"/>2)密码框 <input type="password" />3)提交按钮 <input type="submit" value="按钮内容" />4)重置按钮 <input type="reset" value="按钮内容" />5)空按钮 <input type="button" value="按钮内容" />6）单选按钮组 <input type=“radio” name=“ral” />男 <input type=“radio” name=“ral” checked=“checked”/>(默认选中)女7）复选框组 <input type="checkbox" name="" /> <input type="checkbox" name="" disabled="disabled" />*disabled="disabled" (禁用) *  checked="checked"   (默认选中)表单域下拉列表（菜单）语法：<select >       <option>下拉选项1</option>     <option>下拉选项2</option>     …………</select>表单域多行文本定义：语法：<textarea  name=""  cols=""  rows="" > </textarea>

说明：
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。
get是从服务器上获取数据，post是向服务器传送数据。

HTML5 智能表单

Type=“email” 限制用户必须输入email类型
Type=“url” 限制用户必须输入url类型
Type=“range” 产生一个滑动条表单
Type=“search” 产生一个搜索意义的表单
Type=“color” 生成一个颜色选择的表单
Type=“time” 限制用户必须输入时间类型
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“datetime-local” 选取本地时间

input类型设置

email：专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的，则不允许提交。但它不检查email地址是否存在。提交时可以为空，除非加上了required属性。
具有multiple属性，它允许在该文本框中输入一串以逗号分隔的email地址。

url类型

专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的，则不允许提交。mail地址。

例：<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>

Number类型

专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字，具有min、max、step的属性。

例：<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />

range类型

是用来只允许输入一段范围内数值的文本框，它具有min属性与max属性，及step属性，可以指定每次拖动的步幅。

例： <input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” />

min 最小值
max 最大值
step 数字间隔
(date, month, week, time, datetime,datetime-local)
拥有多个可供选取日期和时间的新输入类型。
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
Search：输入的是搜索的关键字，与type=“text” 基本上一样。
Color：用来选取颜色。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>表单</title>        <style>            form{font-size: 14px;width: 500px;}            fieldset{margin: 15px 0;padding: 15px;border: 1px solid #ccc;background: #f5f5f5;}            legend{font-weight: bold;}            form div{padding: 10px 0;}            label{display: block;}            input,select{width: 300px;}            select{height: 30px;}            input[type=radio],input[type=checkbox],input[type=submit],input[type=reset]{width: auto;}        </style>    </head>    <body>        <form method="post" action="http://www.douban.com">            <!--设置一个框,把一些信息框起来-->            <fieldset>                <!--外部框的名字-->                <legend>个人资料</legend>                <div>                    <label for="uername">姓名：</label>                    <!--输入框     value默认值   type 输入框的类型-->                    <input name="username" id="uername" value="孙尚香" type="text"/>                </div>                <div>                    <label for="pwd">密码：</label>                    <input name="pwd" id="pwd" type="password"/>                </div>                <div>                    <label for="email">Email:</label>                    <input name="email" id="email" type="text" />                </div>                <label>出生地：</label>                <!--下拉菜单-->                <select name="address">                    <option>北京</option>                    <option>上海</option>                    <!--默认值-->                    <option selected="selected">河北</option>                    <option>福建</option>                </select>            </fieldset>            <fieldset>                <legend>个人简介</legend>                <div>                    <label for="text">个人简介：</label>                    <!--文本框  大小可变,这里设置默认值-->                    <textarea name="text" id="text" cols="40" rows="10"></textarea>                </div>            </fieldset>            <fieldset>                <legend>Remember Me</legend>                <div>                    <label for="remember-yes">                        <!--单选按钮  name 设置单选-->                        <input type="radio" name="remember" value="0" id="remember-yes"/>                        男                    </label>                </div>                <div>                    <label for="remember-no">                        <input type="radio" checked="checked" name="remember" value="1" id="remember-no"/>                        女                    </label>                </div>            </fieldset>            <fieldset>                <legend>个人爱好</legend>                <div>                    <!--多选-->                    <label>                        <input type="checkbox" checked="checked" name="hobby"/>                        音乐                    </label>                    <label>                        <input type="checkbox" name="hobby"/>                        电影                    </label>                    <label>                        <input type="checkbox"  name="hobby"/>                        篮球                    </label>                </div>            </fieldset>            <input type="submit" />            <input type="reset" />            <input type="hidden" value="123"/>        </form>    </body></html>

这里写图片描述

阅读全文

0 0