110 lines
3.1 KiB
HTML
110 lines
3.1 KiB
HTML
|
<!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> 表单</title>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<!-- 表单
|
|||
|
|
action 提交地址 跟a标签的herf很像
|
|||
|
|
method 提交方式
|
|||
|
|
-->
|
|||
|
|
<form action="https://www.baidu.com" method="" target="_blank">
|
|||
|
|
<!-- 表单控件 -->
|
|||
|
|
<!--
|
|||
|
|
输入类
|
|||
|
|
文本输入框： type="text"
|
|||
|
|
密码输入框： type="password"
|
|||
|
|
数字输入框： type="number"
|
|||
|
|
选择类
|
|||
|
|
单选
|
|||
|
|
type="radio"
|
|||
|
|
多选
|
|||
|
|
type="checkbox"
|
|||
|
|
按钮类
|
|||
|
|
button
|
|||
|
|
type="sumbit"
|
|||
|
|
type="reset"
|
|||
|
|
type="button"
|
|||
|
|
|
|||
|
|
-->
|
|||
|
|
<h2>输入类</h2>
|
|||
|
|
<hr>
|
|||
|
|
<input type="text" value="默认值">
|
|||
|
|
<hr>
|
|||
|
|
<input type="password" placeholder="请输入密码">
|
|||
|
|
<hr>
|
|||
|
|
<input type="number" placeholder="请输入数字" disabled="true">
|
|||
|
|
|
|||
|
|
<h2>选择类</h2>
|
|||
|
|
<!-- 选择类的，的要有个name属性进行分组，且需要有个value进行赋值 -->
|
|||
|
|
<p>选择你的性别</p>
|
|||
|
|
<label>
|
|||
|
|
男<input type="radio" name="sex" value="男" checked>
|
|||
|
|
</label>
|
|||
|
|
<label title="你是女的吗？">
|
|||
|
|
女<input type="radio" name="sex" value="男">
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<p>选择城市</p>
|
|||
|
|
<select name="city">
|
|||
|
|
<option value="null">---请选择城市---</option>
|
|||
|
|
<option value="">北京</option>
|
|||
|
|
<option value="">上海</option>
|
|||
|
|
<option value="">广州</option>
|
|||
|
|
<option value="">深圳</option>
|
|||
|
|
</select>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2> css3扩展</h2>
|
|||
|
|
<!-- min 最小 max 最大 -->
|
|||
|
|
<input type="range" min="10" max="100" value="20">
|
|||
|
|
|
|||
|
|
<!-- 颜色 -->
|
|||
|
|
<input type="color">
|
|||
|
|
|
|||
|
|
<!-- 时间 -->
|
|||
|
|
<input type="time"/> 时间
|
|||
|
|
<input type="date"/> 年月日
|
|||
|
|
<input type="month"/> 年月
|
|||
|
|
<input type="week"/> 年周
|
|||
|
|
|
|||
|
|
<!-- 文件上传 -->
|
|||
|
|
<input type="file">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2>按钮类</h2>
|
|||
|
|
<!-- button
|
|||
|
|
无值=sumbit 提交（前提在表单内）
|
|||
|
|
sumbit 提交
|
|||
|
|
reset 重置
|
|||
|
|
button 普通按钮
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
<button>提交</button>
|
|||
|
|
<button type="submit">提交</button>
|
|||
|
|
<button type="reset">重置</button>
|
|||
|
|
<button type="button">普通按钮</button>
|
|||
|
|
</form>
|
|||
|
|
<!-- 表单控件属性
|
|||
|
|
name 表单控件中数据的key 必需有
|
|||
|
|
value 1.输入类：设置默认值
|
|||
|
|
2.选择类：设置此选项值
|
|||
|
|
placeholder 提示文本
|
|||
|
|
|
|||
|
|
disable 禁止此表单控件 true
|
|||
|
|
checked 默认选择
|
|||
|
|
title 鼠标悬置时提示文本
|
|||
|
|
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|