继续进行HTML的基础学习与练习，如果想学习网页和对网页感兴趣的朋友，希望这篇文章能给你有帮助。
表单标签from(表单标签是用户提交数据与服务器接收数据的交互标签）
| action属性 | 是一个url，描述指向的处理函数的行动 |
|---|---|
| method | 设置提交给服务器的方式 |
| enctype | 提交方式，默认是键值对方式 |
常见的表单标签（input,select,textarea)
| input 的属性 | 作用 |
|---|---|
| text属性 | 存储文本 |
| value属性： | 设置默认值，每个属性都有，但不是每个属性都使用看自己需要 |
| passwd属性： | 密文显示输入密码 |
| button属性： | 提交数据 |
| checkbox属性： | 设置多选 |
| name属性： | 向服务器传递的数据，在表单中，当二个name一样时表示为同一组，用来做多个选项中选择一个 |
| radio属性： | 显示是一个范围，可以设置默认值，最大值，最小值 |
| time | 设置时间 |
| url | 筛选如果表示网页就会提示错误 |
| 筛选如果表示网页就会提示错误 | |
| file | 准备条件（1，enctype=“multipart/form-data” 2 ，method=“post”） 上传文件 |
| color | 设置颜色（通常用来设置背景颜色） |
| input下按钮标签 | 作用 |
|---|---|
| submit | 提交表单标签 |
| reset | 清除form框下自己写的数据，一般不在使用 |
| button | 不添加数据，但显示 |
| image | 提交一般是标签图片 |
| hidden | 提交隐藏数据的标签 |
| search | 显示一个搜索框 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页</title>
<!-- name:属性传递传输当二个一样表示一个一组 -->
<!-- button 提交数据 -->
<!-- 设置多选checkbox -->
</head>
<body>
<h1>用户注册</h1>
<form action="#" method="get" enctype="">
<!-- action属性：是一个url，描述指向的处理函数的行动 -->
用户下面<input type="text" value="请输入姓名" name= "name"/>
<!-- value="请输入姓名" 提醒用户输入 每个都有value，但不一定使用-->
用户登录<input type="text" name="nickname"/>
<!-- type="text"表示文本格式 -->
<label for="passwd" >用户名密码</label>
<input type="password" id="passwd" />
<!-- label 用*表示密码，不会明文显示-->
<p>
<!-- 设置性别组 -->
<!-- name:属性传递传输当二个一样表示一个一组 -->
用户性别 :<input type="radio" value="man" name="gender"/>男
<!-- input type="radio"（显示的是选择） value="man（表示向服务器传输数据为） -->
<input type="radio" value="woman" name="gender"/>女
</p>
<p>
<!-- 设置多选checkbox -->
爱好:
<input type="checkbox" value="游戏" name="happy" />游戏
<input type="checkbox" value="电视剧" name="happy" />电视剧
<input type="checkbox" value="电影" name="happy" />电影
<input type="checkbox" value="跑步" name="happy" />跑步
</p>
<p>
<!-- 设置网页连接 -->
网页：
<input type="url" value="网页" name="url" />
</p>
<p>
上传头像：
<input type="file" value="上传文件" name="wj"/>
</p>
<p>
用户邮箱：
<input type="email" value="邮箱" name="email"/>
</p>
<p>
<!-- 日期相关属性 -->
<input type="date" value="时间date" />
<br>
<input type="datetime-local" value="时间datetime-local" />
<!-- datetime-local 根据浏览器的选择 ，选择国家不同的时间设置 -->
</p>
<p>
颜色选择器:
<input type="color" />
</p>
<p>
<!-- 特殊的标签 radio 范围-->
<input type="radio" value="5" min="0" max="10" />
</p>
<p>
<!-- 按钮 -->
<input type="submit" value="提交" />
<!-- 提交表单 -->
<input type="reset" value="重置"/>
<!-- reset 清楚数据 不建议使用了-->
<input type="button" value="这是一个标签" />
<!-- button 不会提交表单 -->
<input type="image" src="" />
<!-- 提交标签照片 用到不多了 -->
<input type="hidden" name="o1" value="1"/>
<!-- 隐藏数据 -->
<input type="search" name="搜索框" />
<!-- search 表示一个搜索框 -->
</p>
<button>注册</button>
</form>
</body>
</html>
显示：
| selsctc 的属性 | 作用 |
|---|---|
| option | 设置下拉参数 |
| textarea （文本域）的属性 | 作用 |
|---|---|
| row | 设置行高 |
| cols | 设置列表宽 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页</title>
<!-- name:属性传递传输当二个一样表示一个一组 -->
<!-- button 提交数据 -->
<!-- 设置多选checkbox -->
</head>
<body>
<form action="#" method="get" enctype="">
<p>
用户地址:
<select name="address" id="address"
<option value="-1">请选择您国家地址</option>
<!-- <option value="-1">请选择您国家地址</option>给用户提供选择 -->
<option value="中国">中国</option>
<option value="韩国">韩国</option>
<!-- h5标准下也可以写成下面这样 -->
<option>美国</option>
<option>日本</option>
</select>
<p>
建议: <br>
<textarea row="10" cols="20"></textarea>
<!-- textarea 文本域 -->
<!-- <textarea row="10"(设置行宽) cols="20"(设置列宽)></textarea> -->
</p>
</p>
</form>
</body>
</html>
显示：
一些特殊表单标签
写法： autofocus =“autofocus” 可以写成 autofocus
placeholder=“请输入名称” ：框内提示信息
用户登录<input type="text" name="nickname" placeholder="请输入名称" />
readonly 定义 value，只允许看不允许修改
disable与readonly相似
用户下面<input type="text" value="请输入姓名" name= "name" autofocus"/>
用户下面<input type="text" value="请输入姓名" name= "name" readonly "/>
autocomplete ： 搜索的时候自动补齐（也可以为text）
<input type="search" name="搜索框" autocomplete="on" />
<!-- autocomplete 搜索的时候自动补齐 -->
<!-- search 表示一个搜索框 -->
autofocus 自动聚焦（无法在多选择上聚焦）
用户下面<input type="text" value="请输入姓名" name= "name" readonly autofocus"/>
autofocus 光标每次刷新，光标都会显示在autofocus的属性上
<input type="url" value="网页" name="url" readonly autofocus />
checked 默认值属性（默认情况下的选择）
selected 与 checked 作用一样
<input type="checkbox" value="游戏" name="happy " checked />电视剧
扫一扫
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
