三、Html表单

最新推荐文章于 2024-04-24 14:37:39 发布

小馨whisper

最新推荐文章于 2024-04-24 14:37:39 发布

阅读量72

点赞数

分类专栏： Html和CSS 文章标签： html

本文链接：https://blog.csdn.net/m0_49337181/article/details/117443993

版权

Html和CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

表单用于搜集不同类型得到用户输入，表单有不同类型的标签组成，相关标签及属性用法如下：

1、<from>标签定义整体的表单区域

action 属性定义表单读数据提交地址

method 属性定义表单提交的方式，一般有"get"方式和"post"方式。

2、<label>标签为表单元定义文字标注

3、<input> 标签定义通用的表单元素

type属性：

type="text"：单行文本输入框，可以通过正整数的size控制框长度。

type="password"：密码输入框。

type="radio"：单选按钮，同一组的单选按钮必须要有相同的name。

type="checkbox"：复选框，同一组的单选按钮必须要有相同的name。

type="button"：普通按钮，一般用在js程序里。

type=" submit"：提交按钮，每出现一次，一个 Submit 对象就会被创建。

type="reset"：重置按钮，会重置当前表单中全部的内容。

type="image"：图像形式的提交按钮，写法是“”。

type="hidden"：隐藏域，隐藏字段对于用户是不可见的。

type="file"：文件域，用于文件上传。

value 属性：定义表单元的值

name 属性：定义表单元素的名称，此名称是提交数据时的键名

4、<textarea> 标签定义多行文本输入框

5、<select>标签定义下拉表单元素

6、<option>标签与 <select>标签配合，定义下拉表单元素中的选项

注册单实例：

<body>
    <h3>用户注册</h3>
     <form action="" method="post"><!--action=""里面表单读数据提交地址，不写就代表提交到当前页 -->
        <!-- p标签默认有间距，且占一行 -->
        <p>
        <label>用户名:</label>
        <input type="text" name="username">
        </p>
     <p>
        <label>密&nbsp;&nbsp;&nbsp;码:</label>
        <input type="password"name="username">
     </p>
     <p>
        <label>性&nbsp;&nbsp;&nbsp;别:</label>
       <input type="radio" name ="gender" value="0">男    <!-- name= "gender"是为了体现排它性-->
        <input type="radio" name ="gender" value ="1">女
  </p>
        <p>
            <label>爱&nbsp;&nbsp;&nbsp;好:</label>
            <input type="checkbox" name="hobby" value="a">搬砖
            <input type="checkbox" name="hobby" value="b">游泳
            <input type="checkbox" name="hobby" value="c">运动
            <input type="checkbox" name="hobby" value="d">养生
        </p>
        <p>
            <label>照&nbsp;&nbsp;&nbsp;片:</label>
            <input type="file" name="pic" >
        </p>
        <label>籍&nbsp;&nbsp;&nbsp;贯:</label>
        <select name="site">
            <option value="1">北京</option>
            <option value="2">重庆</option>
            <option value="3">四川</option>
            <option value="4">上海</option>
        </select>
        <p>
            <label>简&nbsp;&nbsp;&nbsp;介:</label>
            <textarea name="info"></textarea> 
        </p>
       <p>
           <input type="submit"value="提交">
           <input type="reset"value="重置">
       </p>
    </form>
</body>

呈现画面：