前端菜鸟笔记 Day-2 Form表单

文章大纲来源：【Day 2】Form表单HTML表单表单元素表单属性HTML5追加的表单元素HTML表单HTML 表单用于搜集不同类型的用户输入。<form><form>标签定义 HTML 表单：<form> … form elements …</form>表单元素HTML 表单包含表单元素。表单元素指的是不同类型的：input元素复选框单选按钮提交按钮等等内容引用：HTML表单元素<input>最重要的表单元素。<input> 元素根据不同的 type 属性可以变化为多种形态。<form> … <input type="…" …> …</form>text单行输入框。<input type=“text” name=“usr”>password字符掩码处理的单行输入框。<input type=“password” name=“psw”>submit一个提交按钮。<input type=“submit”>至于用哪个程序来处理提交的表单数据，在<form>标签中的action属性中定义。<form action=“action.php”> … <input type=“submit” value=“Submit”></form>其中的value属性定义按钮上显示的文字，缺省会显示默认文本（中文环境下为“提交”）。radio定义单选按钮。<form> <input type=“radio” name=“sex” value=“male” checked>Male <br> <input type=“radio” name=“sex” value=“female”>Female</form>其中的name属性非常重要，多个radio类型的<input>只有在name属性相同时才具有单选限制。checkbox定义多选框，允许选0个或多个。<form><input type=“checkbox” name=“vehicle” value=“Bike”>I have a bike<br><input type=“checkbox” name=“vehicle” value=“Car”>I have a car</form>name属性作用类似radio。button定义按钮。<input type=“button”>和<button>标签的异同会在之后单独的专题说明。<input type=“button” onclick=“alert(‘Hello World!’)” value=“Click”>onclick定义触发的方法value定义按钮显示文字file用于选取文件和上传文件。<input type=“file” name=“pic” accept=“image/gif” />涉及到的时候会在之后单独的专题说明。reset定义重置按钮，触发后会清楚表单的所有数据。<input type=“reset” value=“Reset”><select>定义下拉列表。<select name=“cars”> <option value=“volvo”>沃尔沃</option> <option value=“mazda”>马自达</option> <option value=“hevrolet”>雪佛兰</option> <option value=“audi”>奥迪</option></select><option>定义待选择的选项，列表通常会默认选择第一个选项，可以使用slected属性来定义预定义选项。<option value=“mazda” selected>马自达</option><textarea>定义多行输入字段。<textarea name=“message” rows=“10” cols=“30”>The cat was playing in the garden.</textarea><button>定义可点击的按钮。<button type=“button” onclick=“alert(‘Hello World!’)">Click</button>表单属性value（通用）name（通用）readonly（通用）disable（通用）type（重要）checked（radio、checkbox，重要）sizemaxLength内容引用：HTML Input 属性valuevalue属性规定输入字段的初始值，和按钮的显示文字。<input type=“text” name=“firstname” value=“John”>readonlyreadonly属性规定输入字段只读（不可修改）。<input type=“text” name=“firstname” value=“John” readonly>属性不用赋值，等同于readonly=“readonly”。disableddisabled属性规定输入字段是禁用的（不可用和不可点击）。并且也不会被提交（与readonly不同）。<input type=“text” name=“firstname” value=“John” disabled>属性不用赋值，等同于disabled=“disabled”。sizesize属性规定输入字段的尺寸（以字符计）。这里的尺寸，具体指的是类似输入框宽度的属性。<input type=“text” name=“firstname” value=“John” size=“40”>maxlengthmaxlength属性规定输入字段允许的最大长度。<input type=“text” name=“firstname” maxlength=“10”>超过长度的字符不会被接受（也就是输入不进去），但是用户超过时，input元素本身不会有任何提示。HTML5追加的表单元素了解内容，主要是一些新增的Input类型：emailurlnumberrangeDate pickerssearchcolor目前开发的经验来看，这类组件如果对UI统一需求不高的话，可以尝试使用一点，不过一般情况下都会造轮子或者用现成较为成熟的轮子来代替使用这些。内容连接：HTML5 Input 类型个人静态博客：气泡的前端日记： https://rheabubbles.github.io