當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML制作简易个人简历（表单）

發(fā)布時(shí)間：2023/12/9 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML制作简易个人简历（表单）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

《個(gè)人簡(jiǎn)歷》練習(xí)效果圖如下：

說明：“個(gè)人簡(jiǎn)歷”是居于桌面中央

制作步驟：

1、表格標(biāo)題居于第一行并加粗，添加外邊框（邊框?qū)挾入S自己定），代碼如下：

2、制作表格第一行（包括照片欄），代碼如下：

說明：因?yàn)楸韱挝谋咀侄蔚哪J(rèn)寬度是 20 個(gè)字符?，所以為了看著舒服^_^，我把表單的寬度設(shè)為160，高設(shè)為30.照片列是跨四行，所以rowspan="4",寬和高可以自己去匹配。

3、二三行一樣，第四行注意“畢業(yè)學(xué)校”和他的對(duì)應(yīng)的文本字段是跨列的，代碼如下：

4、 “特長(zhǎng)、技能或愛好”行是橫穿整行的，所以應(yīng)用表格，代碼如下：

<tr><td colspan="8">技能、特長(zhǎng)或愛好</td> </tr>

5、“時(shí)間”、“單位”、“經(jīng)歷”列和其對(duì)應(yīng)的文本單元的代碼如下：

6、后面基本沒什么難處，運(yùn)行后情況如下：

我們需要文本文字居中及消除表單文本字段中的內(nèi)方框，代碼如下：

不足之處：無法檢測(cè)性別、出生年月、Email、聯(lián)系電話等輸入是否符合規(guī)范，還需加強(qiáng)。

完整代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ge ren jian li </title><style>body{text-align:center}</style><style>input{border:0px;width:90%;}</style></head> <body><tr><th><b> 個(gè)人簡(jiǎn)歷</b></th></tr><table border="1"><tr><form><td width="160"height="30">姓名</td><td ><input type="text"name="姓名"></td> <td width="160"height="30">性別</td><td ><input type="text"name="性別"></td><td width="160"height="30">出生年月</td><td><input type="text"name="出生年月"></td><td rowspan="4"width="120"height="30"><input type="file"></td></form></tr><tr><form><td width="160"height="30">民族</td><td ><input type="text"name="民族"></td> <td width="160"height="30">政治面貌</td><td ><input type="text"name="政治面貌"></td><td width="160"height="30">身高</td><td><input type="text"name="身高"></td></form></tr> <tr><form><td width="160"height="30">學(xué)制</td><td ><input type="text"name="學(xué)制"></td><td width="160"height="30">學(xué)歷</td><td ><input type="text"name="學(xué)歷"></td><td width="160"height="30">戶籍</td><td><input type="text"name="戶籍"></td></form></tr><tr><form><td width="160"height="30">專業(yè)</td><td ><input type="text"name="專業(yè)"></td><td colspan="2">畢業(yè)學(xué)校</td><td colspan="2"><input type="text"name="畢業(yè)學(xué)校"></td> </form></tr><tr><td colspan="8">技能、特長(zhǎng)或愛好</td></tr><tr><form><td width="160"height="30">外語等級(jí)</td><td colspan="2"><input type="text"name="外語等級(jí)"></td><td width="160"height="30">計(jì)算機(jī)</td><td colspan="4"><input type="text"name="計(jì)算機(jī)"></td> </form></tr><tr><td colspan="8">個(gè)人履歷</td></tr><tr><form><td width="160"height="30">時(shí)間</td><td colspan="2">單位</td><td colspan="6">經(jīng)歷</td></form></tr><tr><form><td><input type="text"name="時(shí)間"></td><td colspan="2"><input type="text"name="單位"></td><td colspan="6"><input type="text"name="經(jīng)歷"></td></form></tr><tr><form><td><input type="text"name="時(shí)間"></td><td colspan="2"><input type="text"name="單位"></td><td colspan="6"><input type="text"name="經(jīng)歷"></td></form></tr><tr><form><td><input type="text"name="時(shí)間"></td><td colspan="2"><input type="text"name="單位"></td><td colspan="6"><input type="text"name="經(jīng)歷"></td></form></tr><tr><td colspan="8">聯(lián)系方式</td></tr><tr><form><td width="160"height="30">Email</td><td colspan="2"><input type="email"name="Email"></td><td width="160"height="30">聯(lián)系電話</td><td colspan="4"><input type="number"name="聯(lián)系電話"></td></form></tr><tr><form><td width="160"height="30">通信地址</td><td colspan="2"><input type="text"name="通信地址"></td><td width="160"height="30">郵編</td><td colspan="4"><input type="text"name="郵編"></td></form></tr><tr><td colspan="8">自我評(píng)價(jià)</td></tr> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的HTML制作简易个人简历（表单）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：基于ip tunnel连接不同三个不同网
下一篇： 2017年html5行业报告,云适配发布