04.HTML基础-表单标签&基础标签

表单标签

• 什么是表单
  表单就是专门用来收集用户信息的
• 什么是表单元素
  是特殊的标签，在浏览器中所有的表三标签都有特殊的外观和默认的功能
• 作用：用于收集用户信息，让用户填写或选择相关的信息
• 格式：

<form>
    所有的表单内容，都要写在form标签里面
</form>

input标签

• 明文输入框
  • 作用: 用户可以在输入框内输入内容
  • 账号:<input type="text"/>
• 暗文输入框
  • 作用: 用户可以在输入框内输入内容
  • 密码:<input type="password"/>
• 给输入框设置默认值
  • 账号:<input type="text" value="123"/>
  • 密码:<input type="password" value="123"/>
• 规定输入字段中的字符的最大长度
  • 账号: <input type="text" name="fullname" maxlength="8" />

<form>
    <!--明文输入框-->
    账号:<input type="text"><br>
    <!--暗文输入框-->
    密码:<input type="password"><br>
    <!--给输入框设置默认值-->
    账号:<input type="text" value="城北徐公"><br>
    密码:<input type="password" value="244466666"><br>
、、、
   


</form>

• 单选框
  注意点:
  1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值
  2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性
  3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐不要省略取值

    性别:
<input type="radio" name="xx" checked>男
<input type="radio" name="xx">女
<input type="radio" name="xx" >保密<br>

• 多选框

爱好：
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球
<input type="checkbox" checked="checked">足浴

• 注意点：
  指定radio和checkbox默认值，前提是同一组你内容必须设置相同的name属性

• 按钮

  • 作用：定义可点击的按钮
  • <input type="button" value="点我丫" />

• 图片按钮

  • 作用:定义图像形式的提交按钮

• 重置按钮

  • 作用: 定义重置按钮。重置按钮会清除表单中的所有数据
  • 注意事项:
    这个按钮不需要写value自动就有“重置”文字，reset只对form表单中表单项有效果

• 提交按钮

  • 作用:定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面
  • <input type="submit" />
  • 注意事项:
    这个按钮不需要写value自动就有“提交”文字，要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性
    <–默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输(学到Ajax再理解)–>

• 隐藏域

  • 作用：定义隐藏的输入字段
  • <input type="hidden">

• 取色器

  • <input type="color">

• 日期选择器

  • <input type="date">

• lable标签

• 作用：lable标签不会呈现任何特殊效果，他可以实现点击文字时也能让输入框聚焦

数据列表

• 作用：给输入框绑定待定选项
• 如何给输入框绑定待选列表
  • 搞一个输入框
  • 搞一个datalist列表
  • 给datalist列表标签添加一个id
  • 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性

请输入你的爱好: <input type="text" list="cars">

<datalist id="lover">
    <option>牧童</option>
    <option>山海</option>
    <option>Tom</option>
    <option>Mary</option>
    <option>侬么得冰阔乐</option>
</datalist>

• 输入待选框的内容会有提示，如输入T，会提示有Tom选项

多行文本框（文本域）

• 作用: textarea标签用于在表单中定义多行的文本输入控件

• cols属性表示columns“列”, 规定文本区内的可见宽度

• rows属性表示rows“行”, 规定文本区内的可见行数

• 格式:<textarea cols="30" rows="10">默认</textarea>

• 注意点:
  1.默认情况下输入框可以无限换行
  2.默认情况下输入框有自己的宽度和高度
  3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
  4.默认情况下输入框是可以手动拉伸的

   <!--禁止手动拉伸-->
<style type="text/css">
    textarea{
        resize: none;
    }
</style>

下拉列表

• 作用: select标签和ul、ol、dl一样，都是组标签. 用于创建表单中的待选列表, 可以从选择某一个带选项
• 格式:

选择以下:
<select>
    <option>除了</option>
    <option>死亡</option>
    <option>其余</option>
    <option>一切</option>
    <option>皆是</option>
    <option>擦伤</option>
    <option>skr~</option>
</select>

• 给下拉列表设置默认值
  和radio、checkbox一样select也可以设置默认值, 通过selected属性设置
  我的 世界 很小 所以 所有 小事 都不小

• 给下拉列表添加分组

<select>
    <optgroup label="吃的">
        <option>蛋糕</option>
        <option>冰淇淋</option>
        <option>巧克力</option>
    </optgroup>
        <optgroup label="喝的">
        <option>茶</option>
        <option>咖啡</option>
    </optgroup>
    <option selected="selected">玩的</option>
</select>