Html - 表单1、Form 2、Input type类型 text ：定义单行的输入字段，用户可在其中输入文本 pa

1、Form

<form
    accept-charset="UTF-8"  // gb2312中文字符集
    action="demo_form.php"  // 表单提交的 - 地址
    autocomplete="on"  // 是否开始自动提示（基于之前键入过的值）
    enctype="multipart/form-data" // 媒体类型-MIME
    method="post" // 表单提交的方式
    name="value" // 表单名称  document.forms["myForm"]
    novalidate // 忽略form元素的原生校验特征就会
    target="_blank" // 提交表单后的响应 、_blank、_self、_parent、_top...
    onsubmit="return validateForm()" // submit的触发事件
>

    用户: <input type="text" name="user" /> 
    密码: <input type="password" name="password" />
    
    // 提交按钮，触发表单提交事件 onsubmit
    <input type="submit" value="提交"  />
</form>
 
 
// 自定义表单验证功能
function validateForm(e) {
    // 表单名称："myForm"
    var x = document.forms["myForm"]["user"].value;
    console.log(x)

    // 阻止表单的默认跳转
    evt.preventDefault();
}

2、Input

type类型

// text ：定义单行的输入字段，用户可在其中输入文本
Email: <input type="text" value="默认值" name="email" />
Pin:   <input type="text" value="默认值" name="pin" />

// password ： 密码字段
<input type="password" value="默认值" name="password" />

// radio ： 单选按钮允许用户选取给定数目的选择中的一个选项
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female

// checkbox ： 复选框允许用户在一定数目的选择中选取一个或多个选项
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike
<input type="checkbox" name="vehicle" value="Car" /> I have a car

// file ：定义输入字段和 "浏览"按钮，供文件上传
<input type="file" />

// image ： 图像形式的提交按钮
<input type="image" src="submit.gif" alt="Submit" />

// hidden：藏字段通常会存储一个默认值
<input type="hidden" name="country" value="Norway" />

// reset ：重置按钮会清除表单中的所有数据
<input type="reset" />

// submit ：提交按钮 用于向服务器发送表单数据
<input type="submit" />

// button ：定义可点击按钮（ 用于通过 JavaScript 启动脚本 ）
<input type="button" value="Click me" onclick="msg()" />

属性

type：定义 input 类型
name ：定义 input 元素的名称
value ：规定 input 元素的默认值
checked ：预定义 input 元素的值（ checkbox 或 radio）
readonly ：只读字段
disabled ：当 input 元素加载时禁用此元素
maxlength 规定输入字段中的字符的最大长度
size 定义输入字段的宽度

事件

onchange ：当 input 的value值发生变化时触发（失去焦点时）
oninput ：当input的value值发生变化时就会触发（不用等失去焦点）
onselect ：当input里的内容文本被选中后执行
onfocus ：当input 获取到焦点时触发
onblur ：当input失去焦点时触发
onkeydown ：按下按键时的事件触发
onkeyup ：当按键抬起的时候触发的事件
onclick ：主要是用于 input type=button

3、Select

<select multiple="multiple" size="2" name = "...">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

select属性

disabled ：规定此选项应在首次加载时被禁用
autofocus ：规定在页面加载时下拉列表自动获得焦点
name ：定义下拉列表的名称
disabled ：当该属性为 true 时，会禁用下拉列表
required ：规定用户在提交表单前必须选择一个下拉列表中的选项
multiple ：当该属性为 true 时，可选择多个选项
size ：规定下拉列表中可见选项的数目

option事件

selected ：首次显示为选中状态
value ：定义送往服务器的选项值
disabled ：首次加载时被禁用
label ：定义当使用时所使用的标注