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> |