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">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，将得到默认的动作。

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

猜你喜欢