Web前端——表单元素

表单元素form

1. 表单控件元素input

• type:设置控件类型

      text:单行文本框
      passwords:密码框
      adio:单选框
      heckbox:复选框
      file:文件上传器
      submit:提交按钮
      button:普通按钮
      reset:重置按钮
      color:颜色拾取器
      number:数字输入框
      range:滑块控件
      date:日期控件
      time:时间控件
      datetime-local:本地时间控件
      month:月控件
      week:周控件
  

• name:设置控件名称

• value:设置控件的值

• min：数字最小值 当类型是number range

• max：数字最大值 当类型是number range

• step：数字步长值 当类型是number range

• checked:是否默认选中 当类型是number range

• disabled:是否可用

• readonly:是否只读

• placeholder:设置输入框提示信息

• autofocus:设置表单控件为焦点状态（可以键入状态）

2. 表单控件元素 下拉框 select
属性：

• name:设置控件名称
• size:设置显示下拉项的个数
• multiple:设置是否多选

子元素：

• option:下拉选项

   	属性：
   	value:下拉值
   	selected:默认下拉项选中
  

• optgroup:下拉项分组

   属性：
   label:下拉项组名
  

3. 表单控件元素 下拉框 textarea

    cols:设置多行文本框的宽度
    rows:设置多行文本框的高度

fieldset元素和legend元素 主要是把表单控件分类

实例

<form action="">
        函调信息收集
        <fieldset>
            <legend>爸爸信息</legend>
            姓名：<input type="text" name="name"><br> 年龄：
            <input type="number"><br> 与发展对象关系：
            <input type="text" name="name"><br> 性别：男
            <input type="radio" name="sex" id="" value="0"> 女<input type="radio" name="sex" id="" value="1"><br> 出生年月：
            <input type="date" name="date"><br> 民族： <input type="text" name="nation"><br> 籍贯：
            <select name="place">
                <optgroup label="河北">
                     <option value="0">石家庄</option>
                     <option value="1">保定</option>
                     <option value="2">邯郸</option>
                </optgroup>
                <optgroup label="江西">
                    <option value="3">南昌</option>
                    <option value="4">九江</option>
                    <option value="5">赣州</option>
               </optgroup>
               <br>
            
            文化程度：
            <input type="text" name="cul">
        </fieldset>
    

        <input type="submit">
        <input type="reset">
        </select>
    </form>