网页光是输出没有输入可不行，因为输出还是比输入容易，所有就先接触输出，后学习输入。html用来输入的东西叫“表单”。
HTML 表单用于搜集不同类型的用户输入。
一、 元素
HTML 表单用于收集用户输入。
元素定义 HTML 表单：
<form> . form elements . </form>
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input> 元素 <input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
这是使用的类型：
类型 描述 text 定义常规文本输入。 radio 定义单选按钮输入（选择多个选择之一） submit 定义提交按钮（提交表单）
文本输入
<input type="text"> 定义用于文本输入的单行输入字段：
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
注释：表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。
单选按钮输入
<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
提交按钮
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定：
<form action="action.js"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
用 <fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
<form action=""> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"></fieldset> </form>
二、HTML Form 属性
HTML <form> 元素，已设置所有可能的属性，是这样的：
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" 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 lang="zh-cn"> <head> <title>编程笔记 html5&css&js html表单</title> <meta charset="utf-8" /> <style> body { color: cyan; background-color: teal; } form { /* 居中表单 */ margin: 0 auto; /* 显示表单的轮廓 */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; width: 300px; } </style> </head> <body> <h1 align="center">编程笔记 html5&css&js html表单</h1> <form id="myForm"> <ul> <li> <label for="name">姓名:</label> <input type="text" id="name" name="user_name" /> </li> <li> <label for="email">邮箱:</label> <input type="email" id="email" name="user_email" /> </li> <li> <label for="interests">兴趣:</label> <br /> <label for="interest1">运动</label> <input type="checkbox" id="interest1" name="interest" value="运动" /> <br /> <label for="interest2">音乐</label> <input type="checkbox" id="interest2" name="interest" value="音乐" /> <br /> <label for="interest3">旅游</label> <input type="checkbox" id="interest3" name="interest" value="旅游" /> <br /> <br /> </li> <li> <label for="msg">补充:</label> <textarea id="msg" name="user_message"></textarea> </li> </ul> <div class="button"> <input align="center" type="button" value="提交" onclick="showDialog()" /> </div> </form> <div align="center" id="rs"></div> <script> function 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>
小结
混个脸熟吧，先。后面慢慢就真熟了，熟练。
