文章目录
表单用于收集不同类型的用户输入
表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，比如：文本域、下拉列表、单选框、复选框等等。
表单使用表单标签 <form> 来设置，多数情况下被用到的表单标签是输入标签（<input>），输入类型是由类型属性（type）定义的
1. 单行文本输入框
实例：
<body>
<form action="" method="get">
提示：<input type="text" placeholder="请输入姓名" name="username">
<br>
默认：<input type="text" value="慕容雪痕">
</form>
</body>
效果如下：
注意：表单本身并不可见
2. 多行文本输入框
实例：
<body>
<form action="" method="get">
<textarea rows="5" cols="30"></textarea>
</form>
</body>
效果：
3. 密码输入框
实例：
<body>
<form action="" method="get">
Password: <input type="password" name="pwd">
</form>
</body>
效果：
注意：密码字段字符不会明文显示，而是以星号或圆点替代
4. 按钮
按钮有好几种实现方法，如下：
<body>
<form action="" method="get">
<input type="text"/><br><br>
<input type="button" value="按钮1">
<button>按钮2</button>
<input type="submit">
<input type="reset">
</form>
</body>
效果：
注意：按钮1只是一个普通的按钮，按钮2和提交按钮会刷新页面，重置按钮会重置页面，但不会刷新
5. 单选框
实例：
<body>
<form action="" method="get">
<h3>请选择您的爱好?</h3>
<input type="radio" name="like" value="code" checked>A. 写代码
<input type="radio" name="like" value="movie" disabled>B. 看电影
<input type="radio" name="like" value="game">C. 玩游戏
</form>
</body>
效果：
说明：checked表示默认选中，disabled表示禁用，不能修改
6. 复选框
实例：
<body>
<form action="" method="get">
<h3>请选择您的爱好?</h3>
<input type="checkbox" name="like2" value="code" checked="checked">A. 写代码
<input type="checkbox" name="like2" value="movie" checked disabled>B. 看电影
<input type="checkbox" name="like2" value="game">C. 玩游戏
</form>
</body>
效果：
7. 下拉菜单
实例：
<body>
<form action="" method="get">
<select name="like3">
<option value ="code">写代码</option>
<option value ="movie" selected>看电影</option>
<option value ="game">玩游戏</option>
</select>
</form>
</body>
效果：
说明：selected表示默认选中
8.扩展
8-1. 网址分析
有如下一个网址：
http://127.0.0.1:8848/Study/day02/test.html?like2=code&like2=game
说明：
http:// 协议
127.0.0.1 IP/Host
8848 Port端口
/Study/day02/ 路径
test.html 访问文件
? 分隔参数和服务器地址
like2=code&like2=game 参数
8-2. input输入类型：color
实例：从拾色器中选取颜色
<body>
选择你喜欢的颜色: <input type="color" name="favcolor">
</body>
效果：
点击颜色框，就会弹出颜色选择器
8-3. input输入类型：file
实例：选择文件
<body>
<input type="file">
</body>
效果：
8-4. input输入类型：number
实例：文本框只能输入数字
<body>
<input type="number">
</body>
8-5. input输入类型：date
实例：定义date控件
<input type="date">
效果：
8-6. input输入类型：email
定义用于e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）
实例：
<form action="" method="">
E-mail: <input type="email" name="usremail">
<input type="submit">
</form>
效果：
8-7. 颜色的写法
(1) 颜色单词
<p style="color: red;">第一种写法</p>
(2) 十六进制
<p style="color: #00FF00;">第二种写法</p>
(3) rgb
<p style="color: rgb(0,0,255);">第三种写法</p>
说明：
r，g，b范围: 0 ~ 255
(4) rgba
<p style="color: rgba(0,0,255,0.5);">第三种写法</p>
说明：
a: alpha透明度，范围：0~1，0表示全透明，1表示不透明
效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
