整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、表单在网页中的应用：登录、注册常用到表单
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小时内与您取得联系。
