下面是一份结构清晰、适合发布或整理成技术笔记的内容示例。【H5 前端开发笔记】第 10 期HTML常用标签 (6) —— 表单技术详解在 Web 开发中表单Form用于收集用户输入的数据例如登录注册搜索提交订单用户反馈HTML 提供了一整套表单标签和输入控件来实现数据交互。一、表单的基本结构HTML 表单使用form标签创建。基本语法formaction提交地址method提交方式表单控件/form示例formaction/loginmethodpost用户名inputtypetextnameusernamebrbr密码inputtypepasswordnamepasswordbrbrinputtypesubmitvalue登录/form说明属性作用action表单提交地址method提交方式name表单字段名称二、表单提交方式常见提交方式有两种1 GETformmethodget特点数据显示在URL 中数据格式/login?usernametompassword123优点简单可收藏 URL缺点不安全数据长度有限制适用搜索查询2 POSTformmethodpost特点数据在请求体中URL 不显示数据优点更安全数据量更大适用登录注册提交数据三、input 输入控件input是最常见的表单控件。基本语法inputtype类型四、常用 input 类型1 文本框inputtypetext示例用户名inputtypetextnameusername常用属性属性说明placeholder提示文字maxlength最大长度value默认值示例inputtypetextplaceholder请输入用户名五、密码框inputtypepassword示例密码inputtypepasswordnamepwd特点输入内容隐藏显示六、单选按钮radioinputtyperadio示例性别inputtyperadionamegendervaluemale男inputtyperadionamegendervaluefemale女关键点多个单选按钮name 必须相同才能互斥。默认选中inputtyperadiochecked七、复选框checkboxinputtypecheckbox示例兴趣inputtypecheckboxnamehobby音乐inputtypecheckboxnamehobby运动inputtypecheckboxnamehobby阅读默认选中inputtypecheckboxchecked八、提交按钮inputtypesubmit示例inputtypesubmitvalue提交点击后表单数据提交到action九、重置按钮inputtypereset示例inputtyperesetvalue重置作用恢复默认值十、普通按钮inputtypebutton示例inputtypebuttonvalue点击特点默认不会提交表单一般配合JavaScript十一、下拉菜单使用select标签。示例selectnamecityoptionvaluebeijing北京/optionoptionvalueshanghai上海/optionoptionvalueguangzhou广州/option/select默认选中optionselected十二、多行文本框使用textarea。示例textarearows5cols30请输入内容/textarea说明属性作用rows行数cols列数常用于评论留言反馈十三、label 标签label用于增强表单可用性。示例labelforusername用户名/labelinputidusernametypetext效果点击文字也能选中输入框。十四、完整表单示例formaction/registermethodpost用户名inputtypetextnameusernamebrbr密码inputtypepasswordnamepasswordbrbr性别inputtyperadionamegender男inputtyperadionamegender女brbr兴趣inputtypecheckbox音乐inputtypecheckbox运动inputtypecheckbox阅读brbr城市selectoption北京/optionoption上海/optionoption深圳/option/selectbrbr个人简介textarearows4cols30/textareabrbrinputtypesubmitvalue提交inputtyperesetvalue重置/form十五、本期总结核心标签标签作用form表单input输入控件select下拉菜单option下拉选项textarea多行文本label标签绑定常见 input 类型textpasswordradiocheckboxsubmitresetbutton如果你需要我还可以帮你整理下一期第 11 期HTML5 新增表单控件email / url / number / date 等这部分是面试非常爱问的内容而且也是HTML5 表单的核心升级。
【H5 前端开发笔记】第 10 期：HTML常用标签 (6) 表单技术 详解
下面是一份结构清晰、适合发布或整理成技术笔记的内容示例。【H5 前端开发笔记】第 10 期HTML常用标签 (6) —— 表单技术详解在 Web 开发中表单Form用于收集用户输入的数据例如登录注册搜索提交订单用户反馈HTML 提供了一整套表单标签和输入控件来实现数据交互。一、表单的基本结构HTML 表单使用form标签创建。基本语法formaction提交地址method提交方式表单控件/form示例formaction/loginmethodpost用户名inputtypetextnameusernamebrbr密码inputtypepasswordnamepasswordbrbrinputtypesubmitvalue登录/form说明属性作用action表单提交地址method提交方式name表单字段名称二、表单提交方式常见提交方式有两种1 GETformmethodget特点数据显示在URL 中数据格式/login?usernametompassword123优点简单可收藏 URL缺点不安全数据长度有限制适用搜索查询2 POSTformmethodpost特点数据在请求体中URL 不显示数据优点更安全数据量更大适用登录注册提交数据三、input 输入控件input是最常见的表单控件。基本语法inputtype类型四、常用 input 类型1 文本框inputtypetext示例用户名inputtypetextnameusername常用属性属性说明placeholder提示文字maxlength最大长度value默认值示例inputtypetextplaceholder请输入用户名五、密码框inputtypepassword示例密码inputtypepasswordnamepwd特点输入内容隐藏显示六、单选按钮radioinputtyperadio示例性别inputtyperadionamegendervaluemale男inputtyperadionamegendervaluefemale女关键点多个单选按钮name 必须相同才能互斥。默认选中inputtyperadiochecked七、复选框checkboxinputtypecheckbox示例兴趣inputtypecheckboxnamehobby音乐inputtypecheckboxnamehobby运动inputtypecheckboxnamehobby阅读默认选中inputtypecheckboxchecked八、提交按钮inputtypesubmit示例inputtypesubmitvalue提交点击后表单数据提交到action九、重置按钮inputtypereset示例inputtyperesetvalue重置作用恢复默认值十、普通按钮inputtypebutton示例inputtypebuttonvalue点击特点默认不会提交表单一般配合JavaScript十一、下拉菜单使用select标签。示例selectnamecityoptionvaluebeijing北京/optionoptionvalueshanghai上海/optionoptionvalueguangzhou广州/option/select默认选中optionselected十二、多行文本框使用textarea。示例textarearows5cols30请输入内容/textarea说明属性作用rows行数cols列数常用于评论留言反馈十三、label 标签label用于增强表单可用性。示例labelforusername用户名/labelinputidusernametypetext效果点击文字也能选中输入框。十四、完整表单示例formaction/registermethodpost用户名inputtypetextnameusernamebrbr密码inputtypepasswordnamepasswordbrbr性别inputtyperadionamegender男inputtyperadionamegender女brbr兴趣inputtypecheckbox音乐inputtypecheckbox运动inputtypecheckbox阅读brbr城市selectoption北京/optionoption上海/optionoption深圳/option/selectbrbr个人简介textarearows4cols30/textareabrbrinputtypesubmitvalue提交inputtyperesetvalue重置/form十五、本期总结核心标签标签作用form表单input输入控件select下拉菜单option下拉选项textarea多行文本label标签绑定常见 input 类型textpasswordradiocheckboxsubmitresetbutton如果你需要我还可以帮你整理下一期第 11 期HTML5 新增表单控件email / url / number / date 等这部分是面试非常爱问的内容而且也是HTML5 表单的核心升级。
