目录
1、用input元素输入文字
1.1、 设定元素大小
1.2、设置初始值和占位式提示
1.3、使用数据列表
1.4、生成只读或被禁用的文本框
1.5指定文字方向数据的名称
2、用input元素输入密码
3、用input元素生成按钮
4、用input元素为输入数据把关
4.1用input元素获取数值
4.2用input元素获取指定范围内的数值
4.3用input元素获取布尔型输入
4.4用input元素生成一组固定选项
input元素可以用来生成一个供用户输入数据的简单文本框。缺点在于用户在其输入什么值都可以
1、用input元素输入文字
type属性设置为text的input元素在浏览器中显示为一个单行文本框
text型input元素可用的额外属性：
⚠️如果要使用多行文本框，使用textarea元素
1.1、 设定元素大小
- maxlength：设定了用户能够输入字符的最大数目（正整数）
- size属性：设定了文本框能够显示的字符数目（正整数）
e<input maxlength="10" id="city " name="city "/> <!--浏览器可以自行确定该文本框在屏幕上占据的宽度，但用户最多只能在其中输入10个字符。--> <input size="10" id="city " name="city "/> <!--浏览器必须确保该文本框的宽度足以显示10个字符，对用户能够输入的字符数目未做限制。--> <input size="10" maxlength="10" id="city " name="city "/> <!--浏览器必须确保该文本框的宽度足以显示10个字符，用户最多只能在其中输入10个字符。-->
1.2、设置初始值和占位式提示
- value属性：设置初始值
- placheholder属性：设置一段提示文字，告诉用户应该输入什么类型的数据
<input value="Apple " id="city " name="city "/> <!--文本框里的默认值为Apple--> <input placheholder="Your name "id="city " name="city "/> <!--提示用户输入名字 。Your name在文本框内呈现为灰色字样。-->
⚠️用button元素重置表单时，浏览器会恢复文本框中的占位式提示和默认值。
1.3、使用数据列表
将 input元素的list属性设置为一个datalist元素的id属性值➡️用户在文本框中输入数据时只需要从后一元素提供的一批选项中进行选择。
datalist元素：可以提供一批值，以帮助用户输入需要的数据。
对于text型input元素，datalist元素提供的值以自动补全建议值的方式呈现：
提供给用户选择的值用option元素指定。
<datalist id="Fruit list"> <option value="apples" label ="apple"/> <option value="oranges" >oranges </option > <option value="banana"/> </datalist>
显示在选择列表中的可以是option元素的value属性值，可以是设定的说明信息，可以是作为option元素的内容设置。
1.4、生成只读或被禁用的文本框
readonly属性：设置为只读
disabled属性：设置禁用
<input value="Alice" disabled id="name"/> <!--设置了disabled属性，文本框显示为灰色，用户不能编辑。--> <input value="Alice" realonly id="name"/> <!--设置了readonly属性，用户不能编辑，但文本框不呈现为灰色。-->
⚠️ 设置了disabled属性的input元素的数据没有被提交到服务器。若要则使用hidden型的input元素。
- readonly属性要谨慎使用，虽然数据能够发送给服务器，都是它外形跟一般设置好默认值的文本框一样，用户看不出来该文本框已经禁止编辑。
1.5指定文字方向数据的名称
dirname属性：将用户输入文字的方向数据发送给服务器，属性值就是方向数据项的名称。
2、用input元素输入密码
type属性值设置为password的input元素用于输入密码。
password型的input元素可用的额外属性：
<input type="password" placeholder ="6 characters " id="password"/> <!--在提交表单时password型input元素不会对密码加以保护，用户输入的值以明文输入。-->
3、用input元素生成按钮
将input元素的type属性设置为submit、reset、button会生成类似button元素的按钮。
<input type="submit" value="Submit Vote"/> <input type="reset" value="Reset Form"/> <input type="button" value="My Button"/>
用input元素生成按钮与用button元素生成按钮不同之处：button可以用来显示含标记的文字。
4、用input元素为输入数据把关
用于输入受限数据的input元素的type属性值：
4.1用input元素获取数值
将input元素的type属性设置为number 生成的输入框只接受数值。
number型input元素可用的额外属性：
<input type="number" step="1" min="0" max="100" value="1" id="price" name="price"/>
4.2用input元素获取指定范围内的数值
使用range型input元素
<input type="range" step="1" min="0" max="100" value="1" id="price" name="price"/>
4.3用input元素获取布尔型输入
checkbox型input元素会生成供用户选择是或否的复选框
checkbox型input元素可用的额外属性：
<input type="checkbox" id="veggie" name="veggie"/>
不足：提交表单时，只有处于勾选状态的复选框的数据值会发送给服务器。
4.4用input元素生成一组固定选项
radio型input元素可以用来生成一组单选按钮，供用户从一批固定的选项中作出选择。
radio型input元素可用的额外属性：
每一个radio型input元素代表着提供给用户的一个选项。要生成一组互斥的选项，只消将所有相关input元素的name属性设置为同一个值。
<fieldset> <legend>Vote for your favorite fruit</legend> <label for="apples"> <input type="radio" checked value="Apples" id="apples" name="fave"/> Apples </label> <label for="oranges"> <input type="radio" value="Oranges" id="oranges" name="fave"/> Oranges </label> <label for="cherries"> <input type="radio" value="Cherries" id="cherries" name="fave"/> Cherries</label> </fieldset>
他们的name属性都设置为fave，以便浏览器把它们关联起来。
