HTML常用标签之表单form

表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并且通过标签的提交操作，把采集到的信息提交到服务器端进行处理。

一、初识form表单

一个完整的表单应该由3部分组成：表单标签、表单域（输入框）、提交按钮

<form>表单标签  
    <input type="text">表单域    
    <button type="submit">提交按钮</button >
</form>

二、form表单标签属性

<form action="#" name="login" method="POST"></form>

三、input标签类型

• value的作用：
  • 预先填充表单中的字段值，方便用户进行编辑或提供默认值。
  • 方便以后以将这些值传递给服务器进行处理。

3.1 text 文本框

注意：placeholder：输入框提示信息（只用于文本性输入框）

输入框：<input type="text" placeholder="这是输入框"><br>

运行截图

3.2 password 密码框

密码框：<input type="password" placeholder="这是密码框">

运行截图

3.3 radio 单选框

注意： 系统默认没有单选这个功能，如果想要实现单选功能，则必须将所有单选框都加上name属性值。名字一样的单选框分为一组，同组只能选择一个。

  单选框：<input type="radio" name="gender">男<input type="radio" name="gender">女

如果想要设置默认选择则必须添加checked属性值，页面打开后就会默认选中一个选项

  单选框：<input type="radio" name="gender" >男<input type="radio" name="gender" checked>女

运行截图

3.4 checkbox 多选框

和单选框一样，如果想要设置默认选中需要添加checked属性值

  多选框：<input type="checkbox" checked>

运行截图

3.5 file 上传文件

系统默认一次只能选择一个文件，如果想要一次选择多个文件，则必须添加multiple属性值

 上传文件：<input type="file" multiple>

运行截图

四、下拉菜单 select option

注意： 如果需要设置默认选中，则需要添加selected属性值

   下拉菜单：
    <select>
        <option>广州市</option>
        <option>海珠区</option>
        <option>荔湾区</option>
        <option selected>增城区</option>
        <option>越秀区</option>
    </select>

运行截图

五、文本域 textarea

注意：实际开发时，应该禁用右下角的拖拽功能

  评论：<br>
    <textarea></textarea>

运行截图

六、lable标签

• 解释lable标签其实就是标签的说明文本
• 作用：增大表单控件的点击范围
• 运用范围：文本框、密码框、文件、单选框、多选框、下拉菜单、文本域等

<label>用户名：<input type="text" placeholder="请输入用户名"></label>
<label>密码：<input type="password" placeholder="请输入密码"></label>

七、button按钮

注意：button按钮需要搭配form表单才能使用

7.1 button类型

• disabled：表示禁用该按钮

<form>
	<button type="submit">提交</button>
	<button type="reset">重置</button>
	<button type="button">普通按钮</button>
	<button type="button" disabled>普通按钮</button>
</form>