html——form表单 input标签 select标签 textarea标签

<form action="url" method="get">
<fieldset> <!--如果表单周围没有边框，说明您的浏览器太老了。-->
<legend>提交</legend>
<lable> <!--焦点法一-->
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
</label>

<label for="bang">Last name:</label> <!--焦点法二（推荐）-->
<br>
<input type="text" name="lastname" value="Mouse" id="bang">
<br><br>
<input type="submit" value="Submit"> <!--提交到 action-->
</fieldset>
</form> 

method方法两种 get和post
get：数据大小有限制 数据并不保密
post：数据大小无限制 数据保密

1、input标签：

type=“file” 用于上传文件

• “image” 用给button ，src引入图片
• “hidden” 悄悄收集用户信息 提交有name且radio和checkbox有独一value的input
• “submit” 同hidden 只是点击提交
• “text” 文本
• “password” 密码
• “checkbox” 复选框
• “radio” 单选按钮
• “email”
• “number”
• “url”
• “data”
• “color”

input 默认值
value → text，password
checked → radio，checkbox

placeholder：表单内容输入提示
placeholder样式设置

::-webkit-input-placeholder{}    	/* 使用webkit内核的浏览器 */
:-moz-placeholder{}                 /* Firefox版本4-18 */
::-moz-placeholder{}                /* Firefox版本19+ */
:-ms-input-placeholder{}            /* IE浏览器 */

 input::-webkit-input-placeholder {
         color: #eee;
         font-size: 18px;
         text-align: center;
   }

2、select下拉菜单

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" selected="selected">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

3、textarea文本域（resize：none；可固定大小 禁止拉伸）

<textarea rows="5" cols="5"></textarea>

textarea 标签的 wrap 属性
wrap 属性
通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。

如果您希望启动自动换行功能（word wrapping），请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。

wrap=“virtual” 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。

wrap=“physical” 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。

如果把 wrap 设置为 off，将得到默认的动作。

4、谷歌浏览器记住密码输入框颜色改变

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

补充

1. html5 表单新增属性：html5 表单属性