表单form
一、初识form表单二、form表单标签属性三、input标签类型3.1 text 文本框3.2 password 密码框3.3 radio 单选框3.4 checkbox 多选框3.5 file 上传文件 四、下拉菜单 select option五、文本域 textarea六、lable标签七、button按钮7.1 button类型表单在网页中主要负责数据采集功能。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>