2029 字
7 分钟阅读
html – 表单
简介
html表单
代码演示
<html>
<head>
<title>html 表单</title>
</head>
<body>
<!-- form 表单标签 -->
<!-- action 属性：表单提交到的url地址 -->
<!-- method 属性：表单提交方式 -->
<!-- get: 默认，表单数据会出现在url中，例子 /save?username=admin&password=admin -->
<!-- 特点： -->
<!-- 1. 不安全 不推荐 -->
<!-- 2.请求大小有限制，不适合提交大数据量大表单 -->
<!-- post: 表单数据不会出现在url中 -->
<!-- 特点： -->
<!-- 1.安全 -->
<!-- 2.请求大小无限制，适合提交大数据量表单 -->
<!-- 表单要能成功提交数据，必须要设置name属性，表示表单项的名字 -->
<form action="/save" method="post">
<!-- 表单项标签 -->
<!-- input 标签：表单输入项标签 通过type属性指定输入项的类型 -->
<!-- type 类型： -->
<!-- text: 单行文本输入项 -->
<!-- password: 密码输入项 -->
<!-- radio: 单选按钮 不同按钮的name属性必须相同，否则会变成多选 -->
<!-- checkbox: 复选框 不同按钮的name属性必须相同 -->
<!-- file: 文件上传项 -->
<!-- date: 日期输入项 -->
<!-- time: 时间输入项 -->
<!-- datetime-local: 日期时间输入项 -->
<!-- hidden: 隐藏项 -->
<!-- submit: 提交按钮 -->
<!-- reset: 重置按钮 -->
<!-- button: 按钮 -->
<!-- select 标签：下拉列表标签 -->
<!-- option 标签：下拉列表项标签 -->
<!-- textarea 标签：多行文本输入项标签 -->
<!-- 使用 label 标签包裹单选按钮 复选框 可以使得被包裹的内容点击时，会自动选中该按钮 -->
用户名：<input type="text" name="username">
密码：<input type="password" name="password">
<br> <br>
<!-- radio: 单选按钮 不同按钮的name属性必须相同，否则会变成多选 -->
<!-- 使用 label 标签包裹单选按钮 复选框 可以使得被包裹的内容点击时，会自动选中该按钮 -->
性别：
<label><input type="radio" name="sex" value="1">男</input></label>
<label><input type="radio" name="sex" value="2">女</input></label>
<br> <br>
<!-- checkbox: 复选框 不同按钮的name属性必须相同 -->
<!-- 使用 label 标签包裹单选按钮 复选框 可以使得被包裹的内容点击时，会自动选中该按钮 -->
爱好：
<label><input type="checkbox" name="hobby" value="1">吃饭</input></label>
<label><input type="checkbox" name="hobby" value="2">睡觉</input></label>
<label><input type="checkbox" name="hobby" value="3">打游戏</input></label>
<label><input type="checkbox" name="hobby" value="4">看电影</input></label>
<br> <br>
<!-- file: 文件上传项 -->
上传文件：
<input type="file" name="file"></input>
<br> <br>
<!-- select 标签：下拉列表标签 -->
<!-- option 标签：下拉列表项标签 -->
城市：
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<br> <br>
<!-- textarea 标签：多行文本输入项标签 -->
描述：
<textarea name="desc">
请输入内容
</textarea>
<br> <br>
<!-- submit: 提交按钮 -->
<input type="submit" value="提交"></input>
<!-- reset: 重置按钮 -->
<input type="reset" value="重置"></input>
<!-- button: 按钮 -->
<input type="button" value="按钮"></input>
</form>
</body>
</html>效果
暂无
