整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、表單在網頁中的應用：登錄、注冊常用到表單
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，默認為 text.
name:指定表單元素的名稱.
value:元素的初始值。type 為 radio時必須指定一個值.
size:指定表單元素的初始寬度。當 type 為 text 或 password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位.
maxlength:type為text 或 password 時，輸入的最大字符數.
checked:type為radio或checkbox時，指定按鈕是否是被選中.
4、示例：
<html >
<head>
<title>表單元素</title>
</head>
<body>
<!-- 表單 -->
<form method="POST" action="#">
<!-- 標簽 -->
<label for="username">姓名：</label>
<!-- 文本框 value屬性是設置默認顯示的值-->
<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"/>女
<!-- 復選框 -->
<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">
個人簡介：
</label>
<!-- 多行文本域 -->
<textarea >本人已同意什么條款</textarea>
<br/>
<br/>
<br/>
<!-- 文件域 -->
<label for="upload">上傳頭像:</label>
<input type="file"/>
<!-- 郵箱 -->
<br/>
<label for="QQ郵箱">郵箱：</label>
<input type="email"/>
<br/>
<!-- 網址 -->
<label for="ur">網址：</label>
<input type="url"/>
<!-- 數字 -->
<br/>
<label for="shuzi">數字：</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默認提示 -->
<br/>
<input placeholder="默認提示框"/>
<br/>
<!-- 文本框內容提示不能為空，否則不允許用戶提交表單（網頁上的必填項） -->
<input required="必填項"/>
<button type="submit">提交</button>
<br/>
<!-- 用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單-->
<input required pattern="^1[3578]\d{9}"/>
<button type="submit">提交</button>
</form>
</body>
</html>
效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html
礎 JavaScript 實例
用JavaScript輸出文本
用JavaScript改變HTML元素
一個外部JavaScript
實例解析
JavaScript 語句、注釋和代碼塊
JavaScript 語句
JavaScript 代碼塊
JavaScript 單行注釋
JavaScript 多行注釋
使用單行注釋來防止執行
使用多行注釋來防止執行
實例解析
JavaScript 變量
聲明一個變量，為它賦值，然后顯示出來
實例解析
JavaScript 條件語句 If ... Else
If 語句
If...else 語句
隨機鏈接
Switch 語句
實例解析
JavaScript 消息框
Alert(警告)框
帶有換行的警告框
確認框
提示框
實例解析
JavaScript 函數
函數
帶有參數的函數
帶有參數的函數 2
返回值的函數
帶有參數并返回值的函數
實例解析
JavaScript 循環
For 循環
循環輸出 HTML 標題
While 循環
Do while 循環
break 語句
continue 語句
使用 For...In 聲明來遍歷數組內的元素
實例解析
JavaScript 事件
onclick事件
onmouseover 事件
實例解析
JavaScript 錯誤處理
try...catch 語句
帶有確認框的 try...catch 語句
onerror 事件
實例解析
高級 JavaScript 實例
創建一個歡迎 cookie
簡單的計時
另一個簡單的計時
在一個無窮循環中的計時事件
帶有停止按鈕的無窮循環中的計時事件
使用計時事件制作的鐘表
創建對象的實例
創建用于對象的模板
JavaScript 應用實例
javascript 幻燈片代碼(含自動播放)
CSS 日歷樣式
JavaScript 彈窗
JavaScript 圖片彈窗
JavaScript Lightbox
javascript 搜索框自動提示
JavaScript 表格數據搜索
時候需要控制下文字數，不然就會溢出，頁面就會變樣不美觀。這時我們就可以用css控制字數，超出部分顯示省略號。可以不換行，超出部分顯示省略號，也可以可以換行，多行，超出部分顯示省略號。
1.不換行，超出部分顯示省略號
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>用css控制字數，超出部分顯示省略號</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
/*超出部分就隱藏*/
overflow:hidden;
/*不換行設定*/
white-space:nowrap;
/*超出部分的文字顯示省略號*/
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box">用css控制字數，超出部分顯示省略號用css控制字數，超出部分顯示省略號</div>
</body>
</html>
效果圖如下：
2.可以換行，多行，超出部分顯示省略號
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>可以換行，多行，超出部分顯示省略號</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控制字數，超出部分顯示省略號用css控制字數，超出部分顯示省略號</div>
<div class="box">2.用css控制字數，超出部分顯示省略號用css控制字數，超出部分顯示省略號</div>
</body>
</html>
效果圖如下：
注：此方法適用于WebKit瀏覽器及移動端。
除注明外的文章,均為來源:湯久生博客,轉載請保留本文地址！
原文地址：http://tangjiusheng.com/divcss/169.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
