表单

• 表单可以理解为一个容器，表单可以获取到该容器内的元素与用户之间的交互信息

<form method=".." action="..">

• method：为获取请求的方式 有get与post两种
• action：表示将获取到的表单发送往何处

表单控件通用属性

• name：表单控件的名称。name是不会显示的。name作用是传输信息
• id：设置表单的身份码，表单控件要与其他标签交互不依靠name识别，而是靠id
• value：表单控件的初始值
  • 除了选择按钮和下拉框，其他控件的value都表示显示在控件上的信息
  • type为单选框和多选框，下拉框时必须指定一个初始值 表示用户选择的信息。用以提交
• size：指定表单控件元素的初始宽度。
  • 当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
• maxlengthtype为text或password时,输入的最大字符数
• checkbed：type为radio或checkbox时,指定按钮是否是被选中
• **placeholder**：类似value属性，但是placeholder可以为任何表单控件都提供提示功能。而且它的提示点击时会直接自动清空不需要手动删除。清空离开后又再次浮现提示
  • 是h5的新属性
  • 只对于各种框，还有文本域有效。其他如单选按钮加了也不会有提示
• pattern：判断输入的数据是否合法 属性值为正则表达式
  • 比如<input type="text",pattern="..."> …为网上搜索的判断是否为合法邮箱的正则表达式，这样比的验证功能强大得多
• disable：标记属性，被标记的控件无法使用，只能看不能点击或者输入
• readonly：标记属性。设置后输入一次就不能更改
• required:标记属性。禁止非空输入，一般也用于框中

• *hidden：标记属性 会直接隐藏控件，但是控件设置的name和value还会在提交时被提交

  表单控件 单

• 注意标签只有在表单内才能进行获取信息与提交信息

• 要得到不同类型的表单控件，只需要修改input的type属性即可<input type="" name="">
  • 下拉框，文本域除外
• type类型默认为text

• 虽然ui库和ui框架的表单扩展很漂亮，但是原生样式的表单仍然很有用，原生更小更简洁。而且各种库和框架也是基于原生控件修改了下样式而已(插件除外)

  文本框：txet

  时间选择：time

• 该控件只能选择一天内的某时:某分:某秒

  • 默认是选择小时和分钟，设置step属性可以精确到秒。step设置=1就行(随便设置貌似没区别，那就1吧)

日期选择：week

• 默认只能选择年和周。更多百度

  密码框：password

  按钮：button

  单选按钮：radio

• 多个单选按钮必须放在一个组里，否则就可以同时选中多个单选按钮。单选按钮的组只要将name属性设置为相同的即表示在一个组里

  多选框：checkbox

• 同一类型的多选框也应该放在一个组里，这样提交时会把这一类型的选项全部提交

  提交按钮：submit

  重置按钮：reset

  文件域：file

  文件域会调用资源管理器的选择文件小窗口

  邮箱输入框：email

• 当输入的邮箱链接不正确是，会进行报错并自动提示。不过这种验证设计的不合理，如123@dd也能通过验证

  链接输入框：url

• 验证是否是一个链接，是的话就可以提交

  数字输入框：number

• 验证输入的是否是一个规定的数字。不符合规定会提示

  • max属性：数字不能超过
  • min属性：数字不能小于
  • step属性：step="10"数字必须是10的倍数。

    滑块：range

• 滑块也有如下属性

  • max属性
  • min属性
  • step属性

• 滑块类似进度条但是又不同。

  • 进度条无js配合时是静态的。而range可以拖动。
  • range比进度条拖动更加丝滑
  • 滑块自带拖动圆点

    搜索框：serach

    跟文本框一模一样。。。

    颜色选择框

• type="color"

下拉框 下拉框默认显示的是第一个选项。不会显示的name

• name的作用是表明以下选项都是一个组里的

size ：添加该属性，则下拉框变为默认展开且无法关闭的状态。最多显示size个选项，超出滚动显示

<select name="爱好">
<option value="eat">吃饭</option>
<option value="sleep">睡觉</option>
<option value="paly">打豆豆</option>
</select>

文本域：</h3></li><li><p>文本域有<code>cols</code>、<code>rows</code>两个属性。表示文本域列数和行数 <a name="dUwwR"></a></p> <h1 id="64oll6"><a name="64oll6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>label标签</h1></li><li><p><strong>该标签作用是点击label标签的文字信息，就相当于同时在绑定的表单控件上也点击了一次</strong></p> </li><li><strong>也可以将控件写在<label>标签里，这样就不用传id了(这种方法只对label里的第一个控件有效!)</strong><ul> <li><strong>一般用于选择按钮上，点击按钮提示信息，按钮也会被选中</strong> ```html <input type="radio" id="danxuan"> <label for="danxuan">我是男生</label>></li></ul> </li></ul> <hr> <p><label >我是男生 <input type="password" name="pwd" value="12345" placeholder="请输入您的密码" > </label> ```</p>