网站建设有何好处,开发微信小程序游戏要多少钱,电子商务职业生涯规划书,wordpress 4.7.3前端HTML入门基础5#xff08;表单#xff09; 表单-基本结构文本框和密码框单选框和复选框隐藏域确认按钮重置按钮普通按钮文本域下拉框禁用表单控件label标签fieldset与legend的使用 表单-基本结构
在HTML中#xff0c;表单#xff08;Forms#xff09;是一种允许用户与… 前端HTML入门基础5表单 表单-基本结构文本框和密码框单选框和复选框隐藏域确认按钮重置按钮普通按钮文本域下拉框禁用表单控件label标签fieldset与legend的使用 表单-基本结构
在HTML中表单Forms是一种允许用户与网页交互的界面元素常用于收集用户输入、提交数据到服务器等。以下是一些关于HTML表单的基本知识和常用元素 form 标签: form 是定义 HTML 表单的标签。通常表单包含输入元素如文本字段、复选框、单选按钮、提交按钮等。target 用于控制表单提交后如何打开页面常用值如下 -self在本窗口打开 -blank:在新窗口打开action 属性定义了当用户提交表单时数据发送到的服务器端脚本的 URL。用于指定表单的提交地址与后端相连method 属性定义了数据传送的方式通常有 GET 和 POST 两种。 输入类型 (Input Types): input 标签用于收集用户输入其类型由 type 属性定义。常见的类型包括 text、password、checkbox、radio、submit、email、date 等 name用于指定提交数据的名字与后端沟通 。textarea 用于创建多行的文本输入区域。button 可以作为表单的提交按钮通过 typesubmit 来指定。 标签和字段集 (Labels and Fieldsets): label 标签为输入元素提供文本描述提高可访问性。fieldset 标签用于对表单中的一组相关元素进行分组。 选择菜单 (Select Menus): select 和 option 标签用于创建下拉选择菜单。select 是菜单容器而 option 定义菜单中的每个选项。 表单验证 (Form Validation): HTML5 引入了一些新的输入类型如 email、url和属性如 required、pattern这些可以帮助在客户端进行基本的表单验证。 提交和重置 (Submit and Reset): input typesubmit 创建一个提交按钮用户点击后会提交表单数据。input typereset 创建一个重置按钮用户点击后会清除表单中所有输入字段的值。 编码 (Encoding): 当使用 POST 方法提交表单时通常建议在 form 标签中添加 enctype 属性以指定数据编码方式例如 enctypemultipart/form-data 用于文件上传。 HTML5 新特性: HTML5 提供了一些新的输入类型如 number、range、color、date、time、datetime-local、month、week、email、tel、search 等以及新的表单属性如 autofocus、autocomplete、placeholder、multiple 等。 表单布局 (Form Layout): 使用 CSS 可以对表单进行样式化和布局设计以提高用户体验。 无障碍性 (Accessibility): 确保所有表单元素都有相关的 label并且使用 name 和 id 属性明确关联标签和输入元素这对于屏幕阅读器用户非常重要。
正确设计和实现HTML表单对于确保良好的用户体验和数据的准确收集至关重要。 例如
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title欧买噶的第2个网页/title
/head
body
form actionhttps://www.baidu.com/sinput typetext namewdbutton去百度搜索/button
/form
hr
form actionhttps://search.jd.com/search target_selfinput typetext namekeywordbutton去京东搜索/button
/form
/body
/html输入要搜索的东西点击按钮则会跳转到百度和京东。
特备注意action标签网址最后的/s,/search
文本框和密码框
输入框 (Input Box)允许用户输入文本信息是最基础的表单元素。通过标签的typetext定义。密码框(Password Field)与文本输入类似但会隐藏输入的内容。使用input typepassword创建。
单选框和复选框
input typeradio namesex valuefemale checked女
input typeradio namesex valuemale男
!--
name属性数据的名称注意想要单选的效果多个radio的name属性值要保持一致。
value属性提交的数据值
checke属性让单选的按钮默认选中
--input typecheckbox namebhobby valuedrink喝酒
input typecheckbox namebhobby valuesmoke抽烟
input typecheckbox namebhobby valueperm烫头
!--
name属性数据的名称
value属性提交的数据值
checke属性让单选的按钮默认选中
--隐藏域 input typehidden nametag value100name属性指定数据的名称value属性指定的真正提交的数据显而易见就是能隐藏起来的看不见的一般用于防止恶意书写脚本批量的执行一些功能
确认按钮
第一种写法 input typesubmit value点我提交表单第二种写法 button点我提交表单/button重置按钮 input typereset value点我重置button typereset点我重置/button重置一般会恢复默认项
普通按钮 input typebutton value普通按钮button typebutton普通按钮/buttonbr文本域 textarea namemsg rows22 cols3我是文本域/textarea文本域 在HTML中通常用于收集用户较长的文本输入如留言、评论或者是文章内容等。
标签定义在HTML中textarea标签用于定义一个可以输入多行文本的控件。与单行文本输入框input typetext不同textarea可以容纳更多的文本内容并且支持换行。常用属性 rows指定文本域显示的行数。cols指定文本域显示的列数。placeholder提供给用户提示信息当文本域为空时显示。disabled设定后文本域将不可编辑。readonly设定后文本域可读但不可编辑。required表单提交时该字段必须填写。 样式调整通过CSS可以改变textarea的大小、边框样式、背景颜色等外观属性。使用场景文本域常见于需要用户提供较多文字的场景例如留言板、评论提交、在线调查问卷或任何需要详细描述的地方。浏览器支持textarea作为标准HTML元素得到现代浏览器的广泛支持。
在实际应用中开发者会根据具体需求设置适当的rows和cols属性以确保用户体验同时可能会配合JavaScript进行更复杂的数据处理和验证。此外随着HTML5的发展textarea也支持新的属性和事件使得它更加强大和灵活。
下拉框
select nameplaceoption value01 selected河南/optionoption value02陕西/optionoption value03兰州/optionoption value04武汉/optionoption value05南京/option
/select默认河南selected
禁用表单控件
!-- 禁用单个控件要禁用特定的输入字段
只需在该输入元素的标签中添加disabled属性。
例如
input typetext namelname disabled
会创建一个禁用的文本输入框。button typebutton disabled普通按钮/buttonbutton disabled typebutton 普通按钮/button
--input textarea button select option 都可以设置disabled属性
label标签
关联元素标签通常与元素配合使用可以通过for属性和元素的id属性建立关联。这样用户点击标签文本时浏览器会自动将焦点转到关联的输入控件上。 关联方式 1、让label标签的for属性的值等于表单控件的id。 2、让表单空间套在label标签的里面 标签用于为表单元素提供文本描述增强可访问性。它通常与元素配合使用可以通过for属性和元素的id属性建立关联。 如何label标签的for属性的值等于表单控件的id 以下是标签的用法以及一个示例
formlabel forusername用户名/labelinput typetext idusername nameusernamebrlabel forpassword密码/labelinput typepassword idpassword namepasswordbrinput typesubmit value登录
/form在上面的示例中我们创建了一个简单的登录表单包括用户名和密码输入框以及一个提交按钮。通过使用标签我们为每个输入框提供了文本描述并通过for属性将它们与相应的输入框关联起来。这样当用户点击标签文本时浏览器会自动将焦点转到关联的输入控件上提高用户体验。 比如点击用户名光标将会出现在用户名对应的输入框里 截图并没有显示出来光标但是用户名对应的输入框加黑 请注意标签本身不包含任何样式或行为但可以通过CSS进行自定义样式。
如何将表单空间放置在标签内部
formlabel forusername用户名input typetext idusername nameusername/labelbrlabel forpassword密码input typepassword idpassword namepassword/labelbrinput typesubmit value登录
/form在上面的示例中我们将用户名和密码输入框放置在标签内部。这样做的好处是即使用户的点击目标偏离了输入框一点只要点击了标签内的文本也能触发对应的输入框。
请注意虽然将表单空间放置在标签内部可以提供更好的用户体验但并不是必需的。根据实际需求和设计要求您可以选择将表单空间放置在标签外部或使用其他方式来组织表单元素。
fieldset与legend的使用
fieldset和legend是HTML中用于创建表单的标签。
fieldset标签用于将表单元素分组通常与legend标签一起使用。legend标签用于为fieldset提供标题或描述。
以下是fieldset和legend的使用示例
formfieldsetlegend个人信息/legend姓名input typetext namenamebr年龄input typenumber nameagebr性别input typeradio namegender valuemale男input typeradio namegender valuefemale女/fieldsetbrfieldsetlegend联系方式/legend邮箱input typeemail nameemailbr电话input typetel namephonebr/fieldsetbrinput typesubmit value提交
/form
