整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、表單在網(wǎng)頁中的應(yīng)用：登錄、注冊(cè)常用到表單
2、表單的語法：
<form method="post" action="result.html">
<p> 名字：<input name="name" type="text" > </p>
<p> 密碼：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
3、表單元素說明：
type:指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默認(rèn)為 text.
name:指定表單元素的名稱.
value:元素的初始值。type 為 radio時(shí)必須指定一個(gè)值.
size:指定表單元素的初始寬度。當(dāng) type 為 text 或 password時(shí)，表單元素的大小以字符為單位。對(duì)于其他類型，寬度以像素為單位.
maxlength:type為text 或 password 時(shí)，輸入的最大字符數(shù).
checked:type為radio或checkbox時(shí)，指定按鈕是否是被選中.
4、示例：
<html >
<head>
<title>表單元素</title>
</head>
<body>
<!-- 表單 -->
<form method="POST" action="#">
<!-- 標(biāo)簽 -->
<label for="username">姓名：</label>
<!-- 文本框 value屬性是設(shè)置默認(rèn)顯示的值-->
<input id="username" value="songzetong" />
<!-- 密碼框 -->
<br/><label for="pwd">密碼：</label>
<input type="password" id="pwd">
<br/>
<!-- 單選框 -->
<label for="sex">性別：</label>
<input type ="radio" name ="sex" checked/>男
<input type ="radio" name ="sex"/>女
<!-- 復(fù)選框 -->
<br/>
<label for="hobby">愛好：</label>
<input type="checkbox" name ="hobby" id="hobby"/>聽音樂
<input type="checkbox" name ="hobby"/>旅游
<input type="checkbox" name ="hobby"/>游泳
<br/>
<!-- 下拉列表 -->
<label for="month">月份：</label>
<select id="month"/>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
<br/>
<!-- 按鈕 -->
<input type="reset" value="重置按鈕"/>
<input type="submit" value="提交按鈕"/>
<input type="button" value="普通按鈕"/>
<br/>
<!-- 圖片按鈕 -->
<input type="image" src="one.jpg" width="200px" heigth="200px"/>
<br/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<br/>
<label for="profile">
個(gè)人簡(jiǎn)介：
</label>
<!-- 多行文本域 -->
<textarea >本人已同意什么條款</textarea>
<br/>
<br/>
<br/>
<!-- 文件域 -->
<label for="upload">上傳頭像:</label>
<input type="file"/>
<!-- 郵箱 -->
<br/>
<label for="QQ郵箱">郵箱：</label>
<input type="email"/>
<br/>
<!-- 網(wǎng)址 -->
<label for="ur">網(wǎng)址：</label>
<input type="url"/>
<!-- 數(shù)字 -->
<br/>
<label for="shuzi">數(shù)字：</label>
<input type="number" name="shuzi" min="0" max="100" step="10"/>
<br/>
<label for="huakuai">滑塊：</label>
<input type="range" />
<!-- 搜索框 -->
<br/>
<label for="sousuo">搜索</label>
<input type="search"/>
<!-- 隱藏域 -->
<br/>
<input type="hidden"value="1">
<!-- 只讀：只能看不能修改，禁用：不能用 -->
<input value="我是只讀的" readonly/>
<input type="button" value="我是禁用的" disabled/>
<!-- palceholder默認(rèn)提示 -->
<br/>
<input placeholder="默認(rèn)提示框"/>
<br/>
<!-- 文本框內(nèi)容提示不能為空，否則不允許用戶提交表單（網(wǎng)頁上的必填項(xiàng)） -->
<input required="必填項(xiàng)"/>
<button type="submit">提交</button>
<br/>
<!-- 用戶輸入的內(nèi)容必須符合正則表達(dá)式所指的規(guī)則，否則就不能提交表單-->
<input required pattern="^1[3578]\d{9}"/>
<button type="submit">提交</button>
</form>
</body>
</html>
效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html
礎(chǔ) JavaScript 實(shí)例
用JavaScript輸出文本
用JavaScript改變HTML元素
一個(gè)外部JavaScript
實(shí)例解析
JavaScript 語句、注釋和代碼塊
JavaScript 語句
JavaScript 代碼塊
JavaScript 單行注釋
JavaScript 多行注釋
使用單行注釋來防止執(zhí)行
使用多行注釋來防止執(zhí)行
實(shí)例解析
JavaScript 變量
聲明一個(gè)變量，為它賦值，然后顯示出來
實(shí)例解析
JavaScript 條件語句 If ... Else
If 語句
If...else 語句
隨機(jī)鏈接
Switch 語句
實(shí)例解析
JavaScript 消息框
Alert(警告)框
帶有換行的警告框
確認(rèn)框
提示框
實(shí)例解析
JavaScript 函數(shù)
函數(shù)
帶有參數(shù)的函數(shù)
帶有參數(shù)的函數(shù) 2
返回值的函數(shù)
帶有參數(shù)并返回值的函數(shù)
實(shí)例解析
JavaScript 循環(huán)
For 循環(huán)
循環(huán)輸出 HTML 標(biāo)題
While 循環(huán)
Do while 循環(huán)
break 語句
continue 語句
使用 For...In 聲明來遍歷數(shù)組內(nèi)的元素
實(shí)例解析
JavaScript 事件
onclick事件
onmouseover 事件
實(shí)例解析
JavaScript 錯(cuò)誤處理
try...catch 語句
帶有確認(rèn)框的 try...catch 語句
onerror 事件
實(shí)例解析
高級(jí) JavaScript 實(shí)例
創(chuàng)建一個(gè)歡迎 cookie
簡(jiǎn)單的計(jì)時(shí)
另一個(gè)簡(jiǎn)單的計(jì)時(shí)
在一個(gè)無窮循環(huán)中的計(jì)時(shí)事件
帶有停止按鈕的無窮循環(huán)中的計(jì)時(shí)事件
使用計(jì)時(shí)事件制作的鐘表
創(chuàng)建對(duì)象的實(shí)例
創(chuàng)建用于對(duì)象的模板
JavaScript 應(yīng)用實(shí)例
javascript 幻燈片代碼(含自動(dòng)播放)
CSS 日歷樣式
JavaScript 彈窗
JavaScript 圖片彈窗
JavaScript Lightbox
javascript 搜索框自動(dòng)提示
JavaScript 表格數(shù)據(jù)搜索
時(shí)候需要控制下文字?jǐn)?shù)，不然就會(huì)溢出，頁面就會(huì)變樣不美觀。這時(shí)我們就可以用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)。可以不換行，超出部分顯示省略號(hào)，也可以可以換行，多行，超出部分顯示省略號(hào)。
1.不換行，超出部分顯示省略號(hào)
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
/*超出部分就隱藏*/
overflow:hidden;
/*不換行設(shè)定*/
white-space:nowrap;
/*超出部分的文字顯示省略號(hào)*/
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box">用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</div>
</body>
</html>
效果圖如下：
2.可以換行，多行，超出部分顯示省略號(hào)
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>可以換行，多行，超出部分顯示省略號(hào)</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
display: -webkit-box;
-webkit-box-orient: vertical;
/*2行*/
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">1.用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</div>
<div class="box">2.用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</div>
</body>
</html>
效果圖如下：
注：此方法適用于WebKit瀏覽器及移動(dòng)端。
除注明外的文章,均為來源:湯久生博客,轉(zhuǎn)載請(qǐng)保留本文地址！
原文地址：http://tangjiusheng.com/divcss/169.html
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
