Web前端开发基础创新实践教程课件：制作个人信息页面.pptxVIP

ProductionScienceDepartmentNavigationModule制作个人信息页面前端开发技术基础FundamentalsofWebFrontendTechnology

web前端技术基础1认识表单Web表单是一种用于在网页上收集用户输入数据的交互性元素。通常用于收集用户的信息、反馈、订阅、注册等等。Web表单一般由多个组件构成，这些组件一起协作，使用户能够输入、提交和处理数据。bodyh2登录/h2formaction=login.phpmethod=postlabelfor=username用户名：/labelinputtype=textid=usernamename=usernamerequiredbrbrlabelfor=password密码：/labelinputtype=passwordid=passwordname=passwordrequiredbrbrinputtype=submitvalue=登录/form/body

web前端技术基础1.2页面请求方式HTTP协议中，POST方法和GET方法是两种常用的请求方式，用于在客户端和服务器之间传递数据。特点GET方法POST方法数据传递方式通过URL的查询参数传递数据，数据附加在URL的末尾，形如通过请求的正文传递数据，数据被包含在请求体中。安全性数据暴露在URL中，不适合敏感信息数据不暴露在URL中，适合敏感信息缓存默认被浏览器缓存默认不被浏览器缓存数据长度有URL长度限制，不适合大量数据理论上没有数据长度限制，适合大量数据幂等性幂等操作，多次调用不产生影响可以是非幂等操作，多次调用可能会对服务器产生不同的影响。

web前端技术基础2页面请求方式表单控件是用于在HTML表单中接收用户输入、选择选项或执行操作的各种元素。它们允许用户与网页进行交互，输入数据并将数据提交给服务器。表单控件描述示例文本框（TextInput）允许用户输入单行文本。inputtype=textname=username密码框（PasswordInput）类似于文本框，但输入内容被隐藏，适用于密码输入。inputtype=passwordname=password文本域（Textarea）允许用户输入多行文本，适用于大文本块。textareaname=comments/textarea单选按钮（RadioButtons）允许用户从一组选项中选择一个。inputtype=radioname=gendervalue=male复选框（Checkboxes）允许用户从一组选项中选择多个。inputtype=checkboxname=hobbiesvalue=reading下拉列表（SelectDropdown）允许用户从预定义选项中选择一个。selectname=countryoptionvalue=China中国/option/select文件上传（FileUpload）允许用户选择并上传文件，如图片、文档等。inputtype=filename=file提交按钮（SubmitButton）触发表单数据提交至服务器，将用户数据发送到后端。inputtype=submitvalue=Submit重置按钮（ResetButton）将表单中的字段重置为默认值。inputtype=resetvalue=Reset隐藏字段（HiddenField）不可见字段，通常用于存储额外的信息。inputtype=hiddenname=tokenvalue=abcd123按钮（Button）用于执行自定义JavaScript操作，不会自动提交表单。buttononclick=myFunction()Clickme/button颜色选择器（ColorPicker）允许用户选择颜色。inputtype=colorname=color日期和时间输入（Date/TimeInput）允许用户输入日期、时间或日期时间。inputtype=datename=dob数字输入（NumberInput）允许用户输入数值。inputtype=numbername=quantity范围输入（RangeInput）用于选择一个范围内的数值，如音量控制。inputtype=rangename=volume邮箱输入（EmailInput）提供邮箱格式验证和适当的输入模式。inputtype=emailname=email电话输入（TelInput）提供电话号码格式验证和适当的输入模式。inputtype=telname=p