微信公众号和网站建设的意义,seo优化包括什么,惠州网站建设领头,平阴网站建设编程笔记 html5cssjs 022 HTML表单概要 一、form 元素二、HTML Form 属性三、操作小结 网页光是输出没有输入可不行#xff0c;因为输出还是比输入容易#xff0c;所有就先接触输出#xff0c;后学习输入。html用来输入的东西叫“表单”。 HTML 表单用于搜… 编程笔记 html5cssjs 022 HTML表单概要 一、form 元素二、HTML Form 属性三、操作小结 网页光是输出没有输入可不行因为输出还是比输入容易所有就先接触输出后学习输入。html用来输入的东西叫“表单”。 HTML 表单用于搜集不同类型的用户输入。 一、 元素
HTML 表单用于收集用户输入。 元素定义 HTML 表单
form.
form elements.
/formHTML 表单包含表单元素。 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
input 元素
input 元素是最重要的表单元素。input 元素有很多形态根据不同的 type 属性。 这是使用的类型
类型 描述
text 定义常规文本输入。
radio 定义单选按钮输入选择多个选择之一
submit 定义提交按钮提交表单文本输入 input typetext 定义用于文本输入的单行输入字段
formFirst name:br
input typetext namefirstname
brLast name:br
input typetext namelastname
/form 注释表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。 单选按钮输入 input typeradio 定义单选按钮。 单选按钮允许用户在有限数量的选项中选择其中之一
form
input typeradio namesex valuemale checkedMale
br
input typeradio namesex valuefemaleFemale
/form 提交按钮 input typesubmit 定义用于向表单处理程序form-handler提交表单的按钮。 表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。 表单处理程序在表单的 action 属性中指定
form actionaction.js
First name:br
input typetext namefirstname valueMickey
br
Last name:br
input typetext namelastname valueMouse
brbr
input typesubmit valueSubmit
/form Action 属性 action 属性定义在提交表单时执行的动作。 向服务器提交表单的通常做法是使用提交按钮。
用 fieldset 组合表单数据 fieldset 元素组合表单中的相关数据 legend 元素为 fieldset 元素定义标题。
form action
fieldset
legendPersonal information:/legend
First name:br
input typetext namefirstname valueMickey
br
Last name:br
input typetext namelastname valueMouse
brbr
input typesubmit valueSubmit/fieldset
/form 二、HTML Form 属性
HTML form 元素已设置所有可能的属性是这样的
form actionaction_page.php methodGET target_blank accept-charsetUTF-8
ectypeapplication/x-www-form-urlencoded autocompleteoff novalidate
.
form elements
.
/form 下面是 form 属性的列表
属性 描述
accept-charset 规定在被提交表单中使用的字符集默认页面字符集。
action 规定向何处提交表单的地址URL提交页面。
autocomplete 规定浏览器应该自动完成表单默认开启。
enctype 规定被提交数据的编码默认url-encoded。
method 规定在提交表单时所用的 HTTP 方法默认GET。
name 规定识别表单的名称对于 DOM 使用document.forms.name。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标默认_self。三、操作
!DOCTYPE html
html langzh-cnheadtitle编程笔记 html5cssjs html表单/titlemeta charsetutf-8 /stylebody {color: cyan;background-color: teal;}form {/* 居中表单 */margin: 0 auto;/* 显示表单的轮廓 */padding: 1em;border: 1px solid #ccc;border-radius: 1em;width: 300px;}/style/headbodyh1 aligncenter编程笔记 html5cssjs html表单/h1form idmyFormullilabel forname姓名:/labelinput typetext idname nameuser_name //lililabel foremail邮箱:/labelinput typeemail idemail nameuser_email //lililabel forinterests兴趣:/labelbr /label forinterest1运动/labelinputtypecheckboxidinterest1nameinterestvalue运动/br /label forinterest2音乐/labelinputtypecheckboxidinterest2nameinterestvalue音乐/br /label forinterest3旅游/labelinputtypecheckboxidinterest3nameinterestvalue旅游/br /br //lililabel formsg补充:/labeltextarea idmsg nameuser_message/textarea/li/uldiv classbuttoninputaligncentertypebuttonvalue提交onclickshowDialog()//div/formdiv aligncenter idrs/divscriptfunction showDialog() {var name document.getElementById(name).value;var email document.getElementById(email).value;var interests [];var checkboxes document.getElementsByName(interest);var msg document.getElementById(msg).value;for (var i 0; i checkboxes.length; i) {if (checkboxes[i].checked) {interests.push(checkboxes[i].value);}}var result 姓名: name \n邮件地址: email \n兴趣: interests.join(, ) \n补充 msg;alert(result);document.getElementById(rs).innerHTML(result);}/script/body
/html小结
混个脸熟吧先。后面慢慢就真熟了熟练。
